建站
咨詢
售后
建站咨詢
新聞中心
css背景樣式怎么設(shè)置
div{
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比達(dá)茂旗網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式達(dá)茂旗網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋達(dá)茂旗地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。
background: #fff000;
font-size: 30px;
border:10px dashed #0000ff;
padding:20px;
background-image: url("../../image/icon.png");
background-repeat:no-repeat;
}
.div2{
margin-top:30px;
background-origin: content-box;
background-clip: content-box;
}
background-clip:規(guī)定背景的繪制區(qū)域
background-origin:相對于內(nèi)容框來定位背景圖像
background-image：背景圖片
background-repeat:背景圖片師傅平鋪重復(fù)
background-size：圖片大小，適應(yīng)獨(dú)，屬性值有cover，百分比，等
CSS如何添加背景圖片
通過css：background-image語句設(shè)置背景。
background-image 屬性會在元素的背景中設(shè)置一個圖像。根據(jù)?background-repeat?屬性的值，圖像可以無限平鋪、沿著某個軸（x 軸或 y 軸）平鋪，或者根本不平鋪。初始背景圖像（原圖像）根據(jù)?background-position?屬性的值放置。
（1）相對的文件位置：
（2）測試代碼：
測試效果：
擴(kuò)展資料：
background-image 屬性為元素元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距。
默認(rèn)地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。
提示：請?jiān)O(shè)置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。
參考資料：百度百科--CSS background-image
css設(shè)置背景顏色
在CSS中，可以使用background-color屬性來設(shè)置背景顏色。background-color屬性設(shè)置一個元素的背景顏色，該屬性為元素設(shè)置一種純色，這種顏色會填充元素的內(nèi)容、內(nèi)邊距和邊框區(qū)域，擴(kuò)展到元素邊框的外邊界。
css背景設(shè)置
可以按順序設(shè)置如下屬性（可點(diǎn)擊進(jìn)入相應(yīng)的css手冊查看使用）：
background-color 背景顏色
background-image 背景圖片
background-repeat 背景重復(fù)
background-attachment 背景圖片是固定還是滾動
background-position 背景圖片的定位
接下來我們重點(diǎn)來講解css background通常的使用方法
首先我們來看下面一段代碼
background:url(bgimg.gif) no-repeat 5px 5px;
如下圖解釋
Css3——background屬性詳解
background ：背景。在css里面作為css屬性一成員，通過該屬性可設(shè)置背景圖片、背景顏色、背景圖片截取等樣式。而僅僅一個background又具有多個子屬性。
顏色名稱，如： background-color:red ;
十六進(jìn)制背景色，如： background-color:#f00; ;
rgb顏色，這里如果是rgba，a表示透明程度，為0全透明，為1為完全不透明，
如： background-color:rgb(255,0,0.3); ;
特殊值：transparent，透明色： background-color:transparent ;
background-image屬性用于為一個元素設(shè)置一個或多個背景圖片，多個背景圖片之間以逗號隔開。
一張圖片： background-image: url(img/a.jpg);
多張圖片： background-image: url(img/a.jpg),url(img/b.jpg);
特殊值：none，不顯示背景圖像
background-image: none;
background-repeat 屬性定義背景圖像的重復(fù)方式。背景圖像可以沿著水平軸，垂直軸，兩個軸重復(fù)，或者根本不重復(fù)。
常用的4個值：
repeat：水平和垂直方向都重復(fù)圖像， background-repeat: repeat;
repeat-x：水平方向重復(fù)圖像
repeat-y：垂直方向重復(fù)圖像
no-repeat：圖像不重復(fù)
規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動。
scroll：背景圖像相對于頁面不動，會隨著網(wǎng)頁的滾動而移動，默認(rèn)
fixed：背景圖像相對于瀏覽器窗口不動，內(nèi)容滾動的時候背景圖像不動
background-attachment: fixed;
第一個值為橫坐標(biāo)，第二個值為縱坐標(biāo)。默認(rèn)值為：(0% 0%)。
如果只指定了一個值，該值將用于橫坐標(biāo)?？v坐標(biāo)將默認(rèn)為50%。
例如： background-position: right； 代表背景圖右側(cè)，垂直方向居中的位置。
百分比位置，如：background-position: 20% 20%;
具體像素位置， 如：background-position: 20px 20px;
background-size 設(shè)置背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。
單張圖片的背景大小可以使用以下三種方法中的一種來規(guī)定：
當(dāng)通過寬度和高度值來設(shè)定尺寸時，你可以提供一或者兩個數(shù)值:
每個值可以是length, 是 percentage, 或者 [auto] 。
示例：
為了設(shè)定超過一張以上的圖片尺寸時，需要提供多項(xiàng)數(shù)值，它們通過逗號分隔。
CSS部分 背景圖片分辨率為427*640
分別給box的background-size屬性添加不同的屬性值，會產(chǎn)生不同的效果。
1、長度 ：可以用px、em、rem等指定背景圖片大小，不能為負(fù)值。
background-clip 裁剪，通常和background-origin一起使用，決定設(shè)置元素的背景（背景圖片或顏色）是否顯示。
注：background-clip只是將背景和背景色粗暴的裁剪。
該屬性有四個值
border-box
背景延伸至邊框外沿（但是在邊框下層）。 background-origin: border-box;
background-origin 規(guī)定了指定背景圖片[ background-image ] 屬性的原點(diǎn)位置的背景相對區(qū)域.
border-box
背景圖片的擺放以border區(qū)域?yàn)閰⒖?/p>
padding-box
背景圖片的擺放以padding區(qū)域?yàn)閰⒖?/p>
content-box
背景圖片的擺放以content區(qū)域?yàn)閰⒖?/p>
樣式：
先看一下background-origin屬性。
先看一下background-clip屬性。
這就印證了background-clip只是將背景和背景色粗暴的裁剪。
好的，以上就是我對background的各個屬性的理解，實(shí)際應(yīng)用時可能會有部分出入，我們只需要掌握background-color、background-image、background-repeat、background-position、background-size這幾個常用的屬性即可。
歡迎大家一起交流，討論。
當(dāng)前標(biāo)題：設(shè)置背景的樣式css,背景樣式怎么設(shè)置樣式6
網(wǎng)站網(wǎng)址：http://fisionsoft.com.cn/article/dscojej.html
