css如何实现真正的网页渐变背景

html-css015

css如何实现真正的网页渐变背景,第1张

方法:根据浏览者的分辨率自动调用样式表

1、新建两个样式表分别命名为:1024.css800.css(当然有更多分辨率,可以增加样式表)

2、在样式表中分别定义好图片作为网页背景。

3、新建一个网页文件,把下面代码复制过去。

<script language="JavaScript">

<!--

function test(){

var a=screen.width+".css"

//alert(a)

//测试变量a的值

document.getElementById("eric").href =a

}

//-->

</script>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>无标题文档</title>

<link href="" rel="stylesheet" type="text/css" id="eric">

</head>

<body onLoad="test()">

</body>

</html>

搞定!

通过css:background-image语句设置背景。

background-image 属性会在元素的背景中设置一个图像。根据 background-repeat 属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。初始背景图像(原图像)根据 background-position 属性的值放置。

(1)相对的文件位置:

(2)测试代码:

测试效果:

扩展资料:

background-image 属性为元素元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

参考资料:百度百科--CSS background-image

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

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

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

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

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