div背景颜色怎样渐变 css实现div层背景颜色渐变代码

html-css013

div背景颜色怎样渐变 css实现div层背景颜色渐变代码,第1张

借助background-position实现渐变过渡

background-image虽然不支持CSS3 transition过渡,但是background-position支持啊,于是,通过控制背景位置,我们是可以实现渐变过渡效果的。

实现效果如下(鼠标hover):

借助background-color实现渐变过渡

background-image虽然不支持CSS3 transition过渡,但是background-color支持啊,于是,通过控制背景颜色,和一个颜色呈现技巧,我们也是可以实现渐变过渡效果的。

鼠标hover前后效果对比:

借助伪元素和opacity实现渐变过渡

借助伪元素创建变换后的渐变效果,通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。

下图为hover之后的效果:

相关代码如下:

扩展资料:mozilla 使用 CSS transitions

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

1、新建两个样式表分别命名为:1024.css 800.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>

搞定!

<style type="text/css">

.divbglg {

height:130px

width:100%

background: -webkit-linear-gradient(#065eff, #fff) /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(#065eff, #fff) /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(#065eff, #fff) /* Firefox 3.6 - 15 */

background: linear-gradient(#065eff, #fff) /* 标准的语法,必须放最后 */

}

</style>

</head>

<body>

<div class="divbglg"></div>

</body>

我设置的是蓝色过渡到白色,并没有你所说的中间一条线啊!楼上那个兄弟所推荐的方法并没错,有问题的话可能是浏览器的问题,实在不行,你就直接做成1个像素的图片平铺得了