杂色的背景,CSS中如何写

html-css08

杂色的背景,CSS中如何写,第1张

什么叫杂色的背景?

楼主请附图

如果是有这样规则渐变背景(如上图),可用一段背景图片平铺而成

也可以用css3最新渐变背景样式(当然考虑到兼容性),代码如下

.gradient{

width:300px

height:150px

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0)

-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0)/*IE8*/

background:red /* 一些不支持背景渐变的浏览器 */

background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5))

background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)))

background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5))

}

<div class="gradient"></div>

如果没有规律只能用背景图片方法了

background:url(bg.jpg) no-repead

1、首先在电脑端找到Dw软件,进行打开操作,然后新建一个html文件。

2、新建文件完成之后,写入一个div代码操作,如图所示。

3、写入div代码之后,引入一个css样式,如图代码操作所示。

4、引入样式代码之后,打开引入的css.文件,如图所示。

5、在新引入的css文件中,写入css背景图片代码即可,如图所示。

css2如果用背景图,实现个分辨率下的图片填充效果是做不到的。用CSS3可以,但是多数浏览器还不支持

如果一定要用,可以通过 <img src="图片路径" width="100%" height="自己设置(固定高度)或不写(自适应高度)" style="position:absolutez-index:-1其他设置根据自己的需求写" />