css设置背景图

来源：互联网发布：中国联通关闭2g网络编辑：程序博客网时间：2024/05/16 05:30

css3之前，设置背景图片很不如意，出现缩放后的图片下面还是一片空白等等问题……

之前使用的背景属性：

background-color 定义背景色  background-image 定义背景图案background-image:url(路径)  background-repeat 重复方式 repeat-x:水平重复,repeat-y:垂直 no-repeat:不重复  background-attachment 设置滚动 scroll:滚动,fixed:固定  background-position 起始位置 percent,length,center,right,lefth,middle,top,bottom;如果是一个值则是x坐标

但是css3出现以后，这个情况被改善了。background-size 属性可以让我们之前的希望成真。
而且这个属性在firefox，chrome，以及ie9上都可以使用。

1.背景图尺寸（数值表示方式）：

代码如下:

#background-size{
background-size:200px 100px;
}

2.背景图尺寸（百分比表示方式）：

代码如下:

#background-size2{
background-size:30% 60%;
}

3.背景图尺寸（等比扩展图片来填满元素，即cover值）：

代码如下:

#background-size3{
background-size:cover;
}

4.背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值）：

代码如下:

#background-size4{
background-size:contain;
}

5.背景图尺寸（以图片自身大小来填充元素，即auto值）：

代码如下:

#background-size5{
background-size:auto;
}

==================================================================================================================================

例如：

<body style="background-image:url('image/regist.jpg');background-attachment:fixed;background-repeat:no-repeat;background-size:cover; "><!--在这里编写你的代码--></body>

0 0