可能的值
color_name 规定颜色值为颜色名称的背景颜色(比如 red)
hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)
rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0)
transparent 默认 背景颜色为透明
可能的值
单个背景图片:background-image:url(a.png)
多个背景图片:background-image:url(a.png),url(b.png)
线性渐变:background-image:-webkit(-repeating)-linear-gradient(方向,颜色值 像素或百分比,颜色值 像素或百分比...)
方向:left,right,top,bottom,90deg,180deg
颜色值 像素或百分比:yellow 10%,transparent 4px,rgb(0,0,0) 2px
径向渐变:background-image:-webkit(-repeating)-radial-gradient([
contain:缩小背景图片使其适应标签元素
cover : 背景图片放大延伸到整个标签元素大小
像素 : 标明背景图片缩放的尺寸大小
百分比 :百分比是根据内容标签元素大小,来缩放图片的尺寸大小
可能的值:left,right,top,bottom,center,像素,百分比
可能的值:repeat,repeat-x,repeat-y,no-repeat,space(不会被裁剪或改变大小),round(不会被裁剪但是会改变图像大小)
可能的值:scroll,fixed
可能的值:border-box,padding-box,content-box
可能的值:border-box,padding-box,content-box
html代码
<p>使用背景绘制方格,使每个文字都在方格里,效果图如下。</p>
css代码
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; }
结果
使用背景绘制方格,使每个文字都在方格里,效果图如下。
Atas ialah kandungan terperinci 详解css样式之background属性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!