CSS Background 背景

background-size

基本設定備註

/*background-size 背景圖設定*/
.background
{    
    -moz-background-size:寬 高;
    -webkit-background-size:寬 高;
    -o-background-size:寬 高;
    background-size:寬 高;
}

.background
{    
    -moz-background-size:auto;        /*for Firefox*/
    -webkit-background-size:auto;        /*for Google Chrome、Safari*/
    -o-background-size:auto;        /*for Opera*/
    background-size:auto;        /*for IE*/
}

/*寬高滿版設定*/
.background
{    
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

/*背景圖>DIV*/
.background
{    
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    /* cbootstrap library */
    background-size:contain;
}

RWD運用

圖片滿版設定，隨螢幕放大縮小

.background
{
     z-index:-2;
     max-width: none !important;
     image-rendering: optimizeQuality;
     -ms-interpolation-mode: bicubic;
     max-width: none !important;
}

<img class="background" src="images/picname.jpg" style="position: fixed; left: 0px; top: 0px; width: 100%; height:100%; bottom: auto; right: auto;">

顏色漸層

/*顏色由上至下*/
#grad {
  background-image: linear-gradient(red, yellow);
}
/*顏色由左至右*/
#grad {
  background-image: linear-gradient(to right, red , yellow);
}
/*顏色運用角度變化*/
#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}