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