CSS背景（background）

129828 閱讀 0 評論 0 點贊

在前端開發(fā)過程中，為了頁面的美觀，往往都會給html頁面添加背景圖片。那么如何利用css設置html中用圖片做背景？本篇文章就給大家介紹css怎樣設置背景圖片，需要的朋友可以參考和學習一下，希望對你有所幫助。

一、background概述

CSS 可以添加背景顏色和背景圖片，以及來進行圖片設置。

屬性	描述
background-color:	設置元素的背景顏色
background-image:	設置元素的背景圖像
background-repeat:	控制背景圖像是否重復
background-position:	控制背景圖像在元素中的位置
background-attachment:	控制背景圖像是否跟隨窗口滾動
background-size	設置背景圖像的尺寸
background-origin	設置 background-position 屬性相對于什么位置來定位背景圖像
background-clip	設置背景圖像的顯示區(qū)域
background	背景屬性的縮寫，可以在一個聲明中設置所有的背景屬性

css background屬性就是專門設置背景的屬性，可以設置背景色，也可以設置背景圖片。

二、屬性

1. background-color

（1）定義和用法：background-color 屬性設置元素的背景顏色

值	描述
color_name	使用具體顏色名稱為元素設置背景顏色（例如 red）
hex_number	使用十六進制碼為元素設置背景顏色（例如 #ff0000）
rgb_number	使用 rgb() 函數(shù)為元素設置背景顏色（例如 rgb(255,0,0)）
transparent	默認值，設置背景顏色為透明，大多數(shù)情況下我們并不會用到它。但如果您不希望某個元素擁有背景顏色，或者不希望用戶對瀏覽器的設置（比如開啟夜間模式、護眼模式）影響到您的設計，那么就可以使用 transparent 來將顏色設置為透明的
inherit	從父元素繼承對背景顏色的設置

（2）元素背景的范圍

background-color 屬性為元素設置一種純色。這種顏色會填充元素的內(nèi)容、內(nèi)邊距和邊框區(qū)域，擴展到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。

（3）transparent 值

盡管在大多數(shù)情況下，沒有必要使用 transparent。不過如果您不希望某元素擁有背景色，同時又不希望用戶對瀏覽器的顏色設置影響到您的設計，那么設置 transparent 值還是有必要的。

使用 background-color 為元素設置背景顏色：

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: white;
        background-color: blue;
        margin: 20px;   /*設置外邊距為 20px*/
        padding: 20px;  /*設置內(nèi)邊距為 20px*/
        border: 10px dotted yellow;  /*設置一個寬 10px 的黃色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-color 屬性</p>
</body>
</html>

展示結果如下：

background-color

通過運行結果可以看出 background-color 屬性能夠為元素設置一種純色的背景，這種顏色會填充元素的內(nèi)容、內(nèi)邊距以及邊框區(qū)域（也可以理解為邊框及以內(nèi)的所有區(qū)域），對于元素邊框以外的區(qū)域（外邊距）則沒有影響。

2. background-image設置背景圖

background-image:url("imgs/main_bg.jpg"),

如果屬性在css文件中設置，而圖片不在css文件夾中，那么路徑前面加上返回上一層文件夾 …/

（1）background-image 屬性為元素設置背景圖像。

（2）元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距。

（3）默認地，背景圖像位于元素的左上角，并在水平和垂直方向上重復。

（4）url(‘URL’)：指向圖像的路徑。

提示：請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。

3. background-repeat背景圖重復

默認情況下，背景圖會鋪滿整個頁面，背景圖大小不夠鋪滿整個頁面時，背景圖會在橫坐標和縱坐標中進行重復；

屬性	屬性值	描述
background-repeat:	repeat	橫、縱坐標重復（默認值）
	no-repeat	背景圖像僅顯示一次，不在任何方向上重復
	repeat-x	背景圖像僅在水平方向上重復
	repeat-y	背景圖像僅在垂直方向上重復
	inherit	從父元素繼承 background-repeat 屬性的設置

4. background-size設置背景圖的尺寸

屬性	屬性值	描述
background-size:	xpos ypos	使用像素（px）或其它 CSS 單位來設置背景圖像的高度和寬度，xpos 表示寬度，ypos 表示高度，如果只設置第一個值，那么第二個值將被設置為默認值 auto（自動）
	x% y%	使用百分比表示背景圖像相對于所在元素寬度與高度的百分比，x% 表示寬度，y% 表示高度，如果只設置第一個值，那么第二個值將被設置為默認值 auto（自動）
	cover	保持背景圖像的橫縱比例并將圖像縮放至足夠大，使背景圖像可以完全覆蓋元素所在的區(qū)域，這么做可能會導致背景圖像的某些部分超出元素區(qū)域而無法顯示
	contain	保持背景圖像的橫縱比例并將圖像縮放至足夠大，使背景圖像可以完整的顯示在元素所在區(qū)域，背景圖像可能無法完全覆蓋整個元素區(qū)域

5. background-position設置背景圖位置

預設值： left、bottom、right、top、center（居中）

屬性	屬性值	描述
background-position:	center	背景圖橫、縱向居中
	center top	橫向居中，縱向靠上
	center bottom	橫向居中，縱向靠下
	left center	橫向靠左，縱向居中

注：也可以用數(shù)值或百分比如background-position：10px 10px 表示橫、縱坐標離左邊、上邊邊框的距離；

6. background-attachment設置為是否固定

屬性	屬性值	描述
background-attachment:	fixed	當頁面的其余部分滾動時，背景圖像固定不動
	scroll	默認值，背景圖像隨著頁面元素的滾動而移動
	inherit	從父元素繼承 background-attachment 屬性的設置

7. background-origin

background-origin 是 CSS3 中新增的屬性。在使用 background-position 屬性來設置背景圖像的位置時，默認是以元素左上角的位置來計算的。您還可以使用 background-origin 屬性來設置 background-position 屬性相對哪個位置來定位背景圖像，background-origin 屬性的可選值如下：

值	描述
padding-box	相對于元素的內(nèi)邊距區(qū)域來定位背景圖像
border-box	相對于元素的邊框區(qū)域來定位背景圖像
content-box	相對于元素的內(nèi)容區(qū)域來定位背景圖像

8. background-clip

background-clip 是 CSS3 中新增的屬性，通過它可以設置背景圖像的顯示區(qū)域。background-clip 屬性的可選值如下：

值	說明
border-box	默認值，在元素邊框及以內(nèi)的區(qū)域顯示背景圖像
padding-box	在元素內(nèi)邊距及以內(nèi)的區(qū)域顯示背景圖像
content-box	在元素內(nèi)容區(qū)域顯示背景圖像

注意：背景半透明是指盒子背景半透明，盒子里面的內(nèi)容不收影響。

9. background

background 是背景屬性的簡寫形式，通過它不僅可以為元素設置某個背景屬性，還可以同時設置多個或者所有的背景屬性。在設置多個背景屬性時并沒有固定的順序，但推薦使用如下順序進行設置：

background-color || background-image || background-position [/ background-size]? || background-repeat || 
background-attachment || background-origin || background-clip

注意：背景圖和img屬性的區(qū)別：

（1）img元素屬于HTML的概念，背景圖屬于css的概念

（2）當圖片屬于網(wǎng)頁內(nèi)容時，必須使用img元素

（3）當圖片僅用于美化頁面時，必須使用背景圖

點贊(0)