可能的數值
color_name 規定為色彩名稱的背景色彩(如red)
hex_number 背景顏色(例如#ff0000)
rgb_number 規定顏色值為rgb 程式碼的背景顏色(如rgb(255,0,0)o#o# c coo
預設背景顏色為透明2、background-image
屬性設定元素的背景:left
##:left#right,top,bottom,90deg,180deg 顏色值像素或百分比:yellow 10%,transparent 4px, 0,0) 2px
徑向漸層:background-image:-webkit(-repeating)-radial-gradient([ > || sest-corner,farthest-corner,contain or cover 3、 屬性用來重設背景圖片大小 像素: 標示背景圖片縮放的尺寸大小 百分比:百分比是根據內容標籤元素大小,來縮放圖片的尺寸大小 4、 屬性用來設定背景圖片位置 屬性用來設定背景圖片位置 屬性用來設定背景圖片是否可以捲動 屬性用來規定背景的繪圖區域 -box,content-box8、background-origin 屬性用來規定background-position 屬性相對於什麼位置來定位 #html程式碼 contain:縮小背景圖片使其適應標籤元素# cover :背景圖片放大延伸到整個標籤元素大小
可能的值:left,right,top,bottom,center,像素,百分比5 、
background-repeat 可能的值:repeat,repeat-x,repeat-y,no-repeat,space(不會被裁切或改變大小),round(不會被裁切但是會改變圖片大小)6、
background-attachment 可能的值: scroll,fixed7、
background-clip 可能的值:border-box,
padding 可能的值:border-box,padding-box,content-box擴充功能:繪製方格
<p>使用背景绘制方格,使每个文字都在方格里,效果图如下。</p>
p {
width: 300px;
height: 300px;
border-left: 3px solid pink;
border-top: 3px solid pink;
background-image: -webkit-linear-gradient(180deg, pink 3px, transparent 3px) , -webkit-linear-gradient(90deg, pink 3px, transparent 3px);
background-size: 30px;
line-height: 30px;
font-size:25px;
letter-spacing: 5px;
}
使用背景繪製方格,使每個文字都在方格里,效果圖如下。
以上是詳解css樣式之background屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!