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([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)

<bg-position>:默认为center

<shape>:circle,ellipse

<size>: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代码

<div>使用背景绘制方格,使每个文字都在方格里,效果图如下。</div>

css代码

1

2

3

4

5

6

7

8

9

10

11

div {

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;

}

结果

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

个人看法

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([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)

<bg-position>:默认为center

<shape>:circle,ellipse

<size>: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代码

<div>使用背景绘制方格,使每个文字都在方格里,效果图如下。</div>

css代码

1

2

3

4

5

6

7

8

9

10

11

div {

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;

}

结果

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