家好，我是大澈！

本文約 700+ 字，整篇閱讀約需 1 分鐘。

每日分享一段優(yōu)質代碼片段。

今天分享一段 CSS 代碼片段，使用 CSS 設置網頁全屏背景圖片，很簡單。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區(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 設置網頁全屏背景圖片，使其在不同瀏覽器中都能完美適應屏幕尺寸。

這對于創(chuàng)建具有視覺吸引力且兼容性良好的網頁非常重要。

代碼解析

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：使背景圖像按比例縮放，以完全覆蓋背景區(qū)域。這意味著圖像可能會被裁剪以適應容器。

3. 瀏覽器前綴的使用

-webkit-background-size：適用于舊版 WebKit 瀏覽器（如舊版 Safari 和 Chrome）。

-moz-background-size：適用于舊版 Firefox 瀏覽器。

-o-background-size：適用于舊版 Opera 瀏覽器。

這些瀏覽器前綴用于處理舊版瀏覽器的兼容性問題。雖然現(xiàn)代瀏覽器大多已經支持標準的 background-size 屬性，但在代碼中加入這些前綴可以確保在老舊瀏覽器中也能正常顯示背景圖片。

- end -

日常開發(fā)中，我們有時候需要獲取某個元素的背景圖片URL。在本文中，我將向大家介紹如何使用JavaScript來實現(xiàn)這一需求。

獲取元素背景圖片URL的JavaScript方法

要獲取元素的背景圖片URL，我們可以使用getComputedStyle方法來獲取background-image的CSS屬性值。

舉個例子，如果我們有如下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);

下面我們來逐步解析這段代碼的實現(xiàn)原理：

1. 選擇元素：我們使用document.querySelector方法來選擇目標div元素。
2. 獲取計算后的樣式：通過調用window.getComputedStyle方法并傳入選中的元素，我們可以獲取該元素的所有計算后的CSS樣式值，這些值存儲在一個對象中。
3. 提取背景圖片URL：使用style.backgroundImage屬性可以獲取到background-image的完整值，例如url("http://www.example.com/img.png")。我們使用slice(4, -1)方法來截取字符串中的URL部分，然后通過replace(/"/g, "")方法去除字符串中的引號。

最終，我們得到的bi變量值就是背景圖片的URL：

'https://www.example.com/img.png'

結束

通過使用JavaScript中的getComputedStyle方法，我們可以輕松獲取到元素的背景圖片URL。這對于動態(tài)處理樣式或者進行其他基于背景圖片的操作非常有幫助。

如果你覺得本文對你有幫助，別忘了點贊并分享給更多需要的朋友！有任何問題或建議，歡迎在評論區(qū)留言，我們一起討論學習！

示：點擊上方"藍色字體"↑ 可以訂閱噢！

摘要 51RGB官方微信css背景設置，讓我們一起學習吧！

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(

)

背景圖片的坐標

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

百分比相對于容器

background-size：auto；/*默認值，只有一個值時，另外一個值為auto*/

background-size：20px 20px；/*固定高寬*/

background-size：50% 50%；/*高寬都是容器的50%*/

background-size：cover；/*圖片盡量小，最小高寬不能小于容器，讓圖片撐滿容器*/

background-size：50% 50%；/*圖片盡量大，但是高寬不能超過容器，背景圖以最大形完全顯示在容器中*/

復合屬性：

想認識志同道合的朋友一起學習web

加入我們的學習QQ群 19066743

豐富的學習資源，周一到周四免費直播公開課

長按圖片，識別二維碼即可入群

你可能感興趣的精彩內容

微信：UI設計自學平臺加關注

長按關注：《UI設計自學平臺》