整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，我是大澈！
本文約 700+ 字，整篇閱讀約需 1 分鐘。
每日分享一段優(yōu)質(zhì)代碼片段。
今天分享一段 CSS 代碼片段，使用 CSS 設(shè)置網(wǎng)頁全屏背景圖片，很簡單。
老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見解！
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īng)屏幕尺寸。
這對(duì)于創(chuàng)建具有視覺吸引力且兼容性良好的網(wǎng)頁非常重要。
代碼解析
1. background: url('images/bg.jpg') no-repeat center center fixed;
background：簡寫屬性，用于設(shè)置所有背景屬性。
url('images/bg.jpg')：指定背景圖像的路徑。
no-repeat：背景圖像不重復(fù)顯示。
center center：背景圖像在水平方向和垂直方向都居中顯示。
fixed：背景圖像固定在視口中，即使頁面滾動(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 瀏覽器。
這些瀏覽器前綴用于處理舊版瀏覽器的兼容性問題。雖然現(xiàn)代瀏覽器大多已經(jīng)支持標(biāo)準(zhǔn)的 background-size 屬性，但在代碼中加入這些前綴可以確保在老舊瀏覽器中也能正常顯示背景圖片。
- end -
日常開發(fā)中，我們有時(shí)候需要獲取某個(gè)元素的背景圖片URL。在本文中，我將向大家介紹如何使用JavaScript來實(shí)現(xiàn)這一需求。
要獲取元素的背景圖片URL，我們可以使用getComputedStyle方法來獲取background-image的CSS屬性值。
舉個(gè)例子，如果我們有如下HTML代碼：
<div style="background-image:url('http://www.example.com/img.png');">...</div>我們可以通過以下JavaScript代碼來獲取背景圖片的URL：
const div = document.querySelector('div');
const style = window.getComputedStyle(div, false);
const bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
console.log(bi);下面我們來逐步解析這段代碼的實(shí)現(xiàn)原理：
最終，我們得到的bi變量值就是背景圖片的URL：
'https://www.example.com/img.png'通過使用JavaScript中的getComputedStyle方法，我們可以輕松獲取到元素的背景圖片URL。這對(duì)于動(dòng)態(tài)處理樣式或者進(jìn)行其他基于背景圖片的操作非常有幫助。
如果你覺得本文對(duì)你有幫助，別忘了點(diǎn)贊并分享給更多需要的朋友！有任何問題或建議，歡迎在評(píng)論區(qū)留言，我們一起討論學(xué)習(xí)！
示：點(diǎn)擊上方"藍(lán)色字體"↑ 可以訂閱噢！
摘要 51RGB官方微信css背景設(shè)置，讓我們一起學(xué)習(xí)吧！
background-color:<color>
background-image:<bg-image>[,<bg-image>]*
background-repeat：<repeat-sytle>[,<repeat-style>]*
<repeat-style>=repeat-x | repeat-y |
[repeat | space | round | no-repeat]{1,2}
space:流出空隙，等分空隙，使得邊緣相接
round:縮放，填充滿元素，使得邊緣相接
background-attachment:<attachment> [,attachment]*
<attachment>=scroll | fixed | local
background-position：<position>[,<position>]*
<position>=[left | center | top | bottom | <percentage> | <length>] | [left | center | right | <percentage> | <length> ] [top | center | bottom | <percentage> | <length>] | [center | [left | right] [<percentage> | <length>]?]&&[center | [top | bottom] [<percentage> | <length>]?]
線性漸變 /*參照Photoshop的漸變*/
linear-gradient([[<angle> | to <side-or-corner>],]? <color-stop> [,<color-stop>]+
<side-or-corner>=[left | right ] || [top | bottom]
<color -stop >=<color>[<percentage> | <length>]?)
<angle>:表示角度
<side-or-corner>：表示漸變拉向的方向
徑向漸變
radial-gradient(
)
背景圖片的坐標(biāo)
background-origin：<box>[,<box>]*
<box>=border-box | padding-box | content-box
裁剪背景
background-clip：<box>[,<box>]*
<box>值同上
background-origin：content-box；
background-size:<bg-size> [,bg-size]*
<bg-size>=[<length> | <pencentage> | auto ]{1,2} | cover | contain
百分比相對(duì)于容器
background-size：auto；/*默認(rèn)值，只有一個(gè)值時(shí)，另外一個(gè)值為auto*/
background-size：20px 20px；/*固定高寬*/
background-size：50% 50%；/*高寬都是容器的50%*/
background-size：cover；/*圖片盡量小，最小高寬不能小于容器，讓圖片撐滿容器*/
background-size：50% 50%；/*圖片盡量大，但是高寬不能超過容器，背景圖以最大形完全顯示在容器中*/
復(fù)合屬性：
想認(rèn)識(shí)志同道合的朋友一起學(xué)習(xí)web
加入我們的學(xué)習(xí)QQ群 19066743
豐富的學(xué)習(xí)資源，周一到周四免費(fèi)直播公開課
長按圖片，識(shí)別二維碼即可入群
你可能感興趣的精彩內(nèi)容
微信：UI設(shè)計(jì)自學(xué)平臺(tái)加關(guān)注
長按關(guān)注：《UI設(shè)計(jì)自學(xué)平臺(tái)》
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
