整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ackground-clip 屬性
規定背景的繪制區域：
border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內邊距框。
content-box 背景被裁剪到內容框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
margin: 50px auto;
padding: 50px;
border: 50px solid rgba(255,0,0,0.5);
background-image: url(img/yangmi.jpg);
/*規定背景的繪制區域：*/
/*background-clip: border-box;*//*背景會填充到邊框*/
/*background-clip: padding-box;*/
background-clip: content-box;
}
</style>
</head>
<body>
<div>我是文字啊啊啊啊</div>
</body>
</html>background-size 屬性
background-size: length|percentage|cover|contain;
length 設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
percentage 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
cover 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
家好，我是大澈！
本文約 700+ 字，整篇閱讀約需 1 分鐘。
每日分享一段優質代碼片段。
今天分享一段 CSS 代碼片段，使用 CSS 設置網頁全屏背景圖片，很簡單。
老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！
html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 適用于舊版 WebKit 瀏覽器 */
-moz-background-size: cover; /* 適用于舊版 Firefox 瀏覽器 */
-o-background-size: cover; /* 適用于舊版 Opera 瀏覽器 */
}分享原因
這段代碼展示了如何使用 CSS 設置網頁全屏背景圖片，使其在不同瀏覽器中都能完美適應屏幕尺寸。
這對于創建具有視覺吸引力且兼容性良好的網頁非常重要。
代碼解析
1. background: url('images/bg.jpg') no-repeat center center fixed;
background：簡寫屬性，用于設置所有背景屬性。
url('images/bg.jpg')：指定背景圖像的路徑。
no-repeat：背景圖像不重復顯示。
center center：背景圖像在水平方向和垂直方向都居中顯示。
fixed：背景圖像固定在視口中，即使頁面滾動，背景圖像也不會移動。
2. background-size: cover;
background-size: cover：使背景圖像按比例縮放，以完全覆蓋背景區域。這意味著圖像可能會被裁剪以適應容器。
3. 瀏覽器前綴的使用
-webkit-background-size：適用于舊版 WebKit 瀏覽器（如舊版 Safari 和 Chrome）。
-moz-background-size：適用于舊版 Firefox 瀏覽器。
-o-background-size：適用于舊版 Opera 瀏覽器。
這些瀏覽器前綴用于處理舊版瀏覽器的兼容性問題。雖然現代瀏覽器大多已經支持標準的 background-size 屬性，但在代碼中加入這些前綴可以確保在老舊瀏覽器中也能正常顯示背景圖片。
- end -
例
指定背景圖像的大?。?/p>
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
在此頁底部有更多的例子。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-size | 4.01.0 -webkit- | 9.0 | 4.03.6 -moz- | 4.13.0 -webkit- | 10.510.0 -o- |
標簽定義及使用說明
background-size屬性指定背景圖片大小。
| 默認值: | auto |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | objectobject.style.backgroundSize="60px 80px" |
語法
background-size: length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length | 設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"atuo(自動)" |
| percentage | 將計算相對于背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)" |
| cover | 此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。 |
| contain | 此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
