CSS——讀書筆記-04-背景圖

第四章 背景圖像效果

1.基礎

默認狀況下，瀏覽器水平和垂直地重複顯示背景圖像，讓圖像平鋪在整個頁面上。

body {
    background-image:url(/img/pattern.fig);
}

能夠選擇水平、垂直、不平鋪：repeat-x、repeat-y、no-repeat

body {
    background-image: url(/img/pattern.gif);
    background-repeat: repeat-x;
}

能夠設置背圖位置

如： 元素左邊，垂直居中。（也可使用像素和百分數實現）

h1 {
    padding-left: 30px;
    background-image: url(/imd/bullet.gif);
    background-repeat: no-repeat;
    background-position: left center;
}

簡寫：

h1 {
    background: #ccc url(/img/ddd.gif) no-repeat left center;
}

　　

2.圓角框

1》固定寬度的圓角框——能夠經過背景圖像實現圓角

上邊top一個圖、下邊bottom一個圖，中間用背景色鏈接

靈活的，可寬度擴展的，能夠設置4個角各一張圖，而後寬度設置em單位，可根據字號拉伸。

2》多背景、border-radius、border-image

 

3.投影

1》圖片負外邊距偏移

2》圖像加上邊框和內邊距

3》box-shadow: 

須要4個值：垂直和水平偏移、投影的寬度和顏色

 

4.不透明度：

opacity: 0.8

background-color: rgba(0,0,0,0.8)