css如何同时实现左右上下渐变
发布网友
发布时间：2022-04-20 04:17
我来回答
共3个回答
热心网友
时间：2022-04-28 14:42
<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个像素的图片平铺得了
追问我的问题是上下左右同时渐变，并不是单一的上下或者左右渐变，你看我的图片右侧蓝色比左边要深些
追答
噢。。。明白了，你图片左右不太明显，也没仔细看清楚提问，你这个问题用单独一个样式解决不了，但是啊，你可以用2个啊，一个做蓝色到白色的上下渐变，一个做白色半透明把上面的遮盖一下，看下面我写的样式
<style type="text/css">
.divbglg01 {
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); /* 标准的语法,必须放最后 */
}
.divbglg02 {
height:130px;
width:100%;
background: -webkit-linear-gradient(90deg,rgba(0,0,0,0.2), rgba(255,255,255,0.2)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(90deg,rgba(0,0,0,0.2), rgba(255,255,255,0.2)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(90deg,rgba(0,0,0,0.2), rgba(255,255,255,0.2)); /* Firefox 3.6 - 15 */
background: linear-gradient(90deg,rgba(255,255,255,0.5), rgba(255,255,255,0)); /* 标准的语法,必须放最后 */
}
</style>
</head>
<body>
<div class="divbglg01">
<div class="divbglg02"></div>
</div>
</body>
热心网友
时间：2022-04-28 16:00
参考这个代码：
<style>
body{width:100%;margin: 0 auto;height:100%;min-height:300px;background:-webkit-linear-gradient(left,#9fcdf6,#497ed0) ;}
.container{width:100%;padding-top:250px;min-height:600px;background:-webkit-linear-gradient(top,#9fcdf6,#497ed0);}
</style>
<div class="container"></div>
追问
你说的这种方法应该是指：横纵向重叠，只能适用于颜色相差不是特别大的情况下，不然瑕疵就会更明显，如下图，会有一条淡淡的细线，如果横向渐变色差更大，这就会更明显，还有更好的方法吗
热心网友
时间：2022-04-28 17:35
background: -moz-linear-gradient(top, #041d2a, #1379ab);
background: -webkit-gradient(linear,top,from(#041d2a),to(#1379ab));
background: -webkit-linear-gradient(top, #041d2a, #1379ab);
background: -o-linear-gradient(top, #041d2a, #1379ab);
background: -moz-linear-gradient(left, #041d2a, #1379ab);
background: -webkit-gradient(linear,left,from(#041d2a),to(#1379ab));
background: -webkit-linear-gradient(left, #041d2a, #1379ab);
background: -o-linear-gradient(left, #041d2a, #1379ab);
声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。E-MAIL:11247931@qq.com