详解css样式之background属性

background用法详解：

1、background-color 属性设置元素的背景颜色

    可能的值

    color_name            规定颜色值为颜色名称的背景颜色（比如 red）

    hex_number          规定颜色值为十六进制值的背景颜色（比如 #ff0000）

    rgb_number          规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)

    transparent           默认 背景颜色为透明

2、background-image 属性设置元素的背景图片

    可能的值

    单个背景图片：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([08e6f6d89dd1803099e4ddb33bde4068 || 0c0cb308ee3d2ee3281772bfc9b806c2,]? [18b1d935585fae6b48e00ea5f5b48e2d || 971f671fe497569bdb0616a45a44dc0f,]? 9abf9243314f6d1cd71ac1087d19db3b, 9abf9243314f6d1cd71ac1087d19db3b[, 9abf9243314f6d1cd71ac1087d19db3b]*)

                    f276c287a985357530010534ab7c6473:默认为center

                    18b1d935585fae6b48e00ea5f5b48e2d:circle,ellipse

                    971f671fe497569bdb0616a45a44dc0f:closest-side,farthest-side,closest-corner,farthest-corner,contain or cover

3、background-size 属性用来重设背景图片大小

    contain：缩小背景图片使其适应标签元素

    cover ： 背景图片放大延伸到整个标签元素大小

    像素 ：   标明背景图片缩放的尺寸大小

    百分比 ：百分比是根据内容标签元素大小，来缩放图片的尺寸大小

4、background-position 属性用来设置背景图片位置

    可能的值：left,right,top,bottom,center,像素,百分比

5、background-repeat 属性用来设置背景图片位置

    可能的值：repeat,repeat-x,repeat-y,no-repeat,space(不会被裁剪或改变大小),round(不会被裁剪但是会改变图像大小)

6、background-attachment 属性用来设置背景图片是否可以滚动

    可能的值：scroll，fixed

7、background-clip 属性用来规定背景的绘制区域

    可能的值：border-box,padding-box,content-box

8、background-origin 属性用来规定 background-position 属性相对于什么位置来定位

    可能的值：border-box,padding-box,content-box

扩展：绘制方格

html代码

e388a4556c0f65e1904146cc1a846bee使用背景绘制方格，使每个文字都在方格里，效果图如下。94b3e26ee717c64999d7867364b1b4a3

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;    
}

结果

使用背景绘制方格，使每个文字都在方格里，效果图如下。

 

以上是详解css样式之background属性的详细内容。更多信息请关注PHP中文网其他相关文章！