CSS的background匯總

這篇文章主要講解了“CSS的background匯總”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS的background匯總”吧！

創(chuàng)新互聯(lián)公司成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元甘泉做網(wǎng)站,已為上家服務(wù),為甘泉各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

所有背景屬性都不能繼承。

1. background-color

所有元素都能設(shè)置背景顏色。

background-color的默認(rèn)值是transparent；也就是說，如果一個元素沒有指定背景顏色，那么背景就是透明的，這樣其祖先元素的背景才能可見。

2. background-image

所有元素都能設(shè)置背景圖像；

背景圖像可以設(shè)置多個，中間用逗號隔開；背景圖像會層疊，寫在前面的層次在上面。

3. background-repeat

repeat（默認(rèn)）/no-repeat/repeat-x/ repeat-y

4. background-attachment

scroll（默認(rèn)）/fixed

5. background-position

像素法：以圖像左上角為起點，第一個值為水平移動的距離，第二個值為垂直移動的距離；若只規(guī)定一個值，第二個值默認(rèn)為50%。

百分比法：百分比同時應(yīng)用于圖像和元素，相應(yīng)的點重合進行定位。如果只指定一個百分?jǐn)?shù)，意味著垂直方向為50%。

關(guān)鍵字法：top、right、bottom、left、center進行組合定位；若只規(guī)定一個值，第二個值默認(rèn)為center。

注意：background-position可以為負(fù)值。

在默認(rèn)情況下，背景顏色延伸到邊框下面，背景圖像在padding區(qū)域的左上角。

6. background-size

設(shè)置背景圖像的尺寸；默認(rèn)值為auto。

像素法：第一個值設(shè)置寬度，第二個值設(shè)置高度；若只有一個值，第二個值為auto。

百分比法：以父元素的寬度和高度以基準(zhǔn)來計算。

關(guān)鍵字cover，不改變圖像寬高比例，在水平和垂直方向都鋪滿整個元素，有可能導(dǎo)致一部分圖像溢出。

關(guān)鍵字contain，不改變圖像寬高比例，盡可能拉伸，直到某一方向鋪滿整個元素，有可能導(dǎo)致另一方向沒有鋪滿。

7. background-origin

定義背景圖像的初始位置

border-box，邊框左上角。

padding-box，padding區(qū)域左上角；默認(rèn)值。

content-box，內(nèi)容區(qū)左上角。

8. background-clip

The CSS3 background-clip property specifies the painting area of the background.

The property takes three different values:

•border-box - (default) the background is painted to the outside edge of the border

•padding-box - the background is painted to the outside edge of the padding

•content-box - the background is painted within the content box

（英文的解釋得比較清楚）

（英文都是從W3Schools Online搬運）

關(guān)于background-origin和background-clip，它們是相互獨立的，互不干擾。

關(guān)于background的CSS寫法，個人認(rèn)為應(yīng)該邏輯明確、層次分明；具體而言：

background定義背景圖像，background-color定義背景顏色，background-clip定義背景顯示區(qū)域。

（個人見解，僅供參考）

Full Size Background Image

If we want to have a background image on a website that covers the entire browser window at all times.

The requirements are as follows:

• Fill the entire page with the image (no white space)

• Scale image as needed

• Center image on page

• Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

CSS Code復(fù)制內(nèi)容到剪貼板

html {
background: url(img_flower.jpg) no-repeat center fixed;
background-size: cover;
}

小tips：

利用背景圖像的水平平鋪，實現(xiàn)波浪式的邊框效果。

感謝各位的閱讀，以上就是“CSS的background匯總”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS的background匯總這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

分享名稱：CSS的background匯總
網(wǎng)站網(wǎng)址：http://muchs.cn/article26/ipjejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、企業(yè)建站、標(biāo)簽優(yōu)化、外貿(mào)建站、定制網(wǎng)站、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容