淺談在網頁中你所不知道的css背景屬性
阿新 • • 發佈：2019-05-09
縱橫比 percent 頁面 ges ack ont 應用 500px cli 在很多網頁設計中，很多人對於css的背景屬性，只是停留在設置背景。今天我們來談談它的其他應用。
比如背景的定位，它能實現很多翻轉網頁效果。
background-position：指定背景圖像的位置
background-size 指定背景圖片的大小
background-image 指定要使用的一個或多個背景圖像
background-repeat 指定如何重背景圖像
background-origin 指定背景圖像的定位區域
background-clip 指定背景圖像的繪畫區域
background-attachment 設置背景圖像是否固定或者隨著頁面的其余部分滾動。
#dome{
width: 500px;height: 500px;
margin: 0 auto;
background: #cccccc url(images/history.jpg) no-repeat ;
}
定位background-image：
#dome{
width: 500px;
height: 500px;
margin: 0 auto;
background: #cccccc url(images/history.jpg) no-repeat ;
background-position: 25px 100px;
}
結果：背景圖片在顯示在中心。
設置背景的圖片大小：
background-size: length|percentage|cover|contain;
length 設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為 auto(自動)
percentage 將計算相對於背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)"
cover 此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小。
contain 此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。
淺談在網頁中你所不知道的css背景屬性