怎样用css实现图片的渐变？如图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样用css实现图片的渐变？如图相关的知识，希望对你有一定的参考价值。
背景图片从上往下透明度逐渐变化，并且上面覆盖有内容。
div
box-sizing:border-box;
width:400px;
height:240px;
font-size:22px;
padding-top:100px;
overflow:hidden;
background:no-repeat center top / 100% 100%;
background-image:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)), url(背景图片路径写在这)
</style>
<div>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div> 参考技术A 这个你可以在图片上面加个渐变颜色就行了，background:linear-gradient（）
怎样用css写线条左右渐变？
用css代码怎样实现一个像素左右渐变，如下图
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo
width:200px;
height:10px;
background:-webkit-linear-gradient(left, rgb(80,80,255,0.2) , #fff) /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, rgb(80,80,255,0.2) , #fff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, rgb(80,80,255,0.2) , #fff); /* Firefox 3.6 - 15 */
background: linear-gradient(to left, rgb(80,80,255,0.2) , #fff); /* 标准的语法 */
</style>
</head>
<body>
<div class="demo" ></div>
</body>
</html>本回答被提问者和网友采纳 参考技术B 很多时候在开发网页的时候，可能因为一些原因需要为边框设置颜色渐变，那么该如何设置颜色边框渐变？本篇文章将为大家介绍使用css3设置边框颜色渐变的方法。
我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色渐变，那么两个属性如何设置边框颜色渐变。
我们首先来看border-image属性实现的简单css3边框颜色渐变的例子：
第一种：border-image设置边框颜色渐变示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
.box
width: 100px;
height: 100px;
border:10px solid #ddd;
border-image: -webkit-linear-gradient(#F80, #2ED) 20 20;
border-image: -moz-linear-gradient(#F80, #2ED) 20 20;
border-image: -o-linear-gradient(#F80, #2ED) 20 20;
border-image: linear-gradient(#F80, #2ED) 20 20;
</style>
</head>
<body>
<div></div>
</body>
</html>
css3边框颜色渐变效果如下：
说明：上述代码中你会发现给border-image加了linear-gradient，这是为什么呢？因为若是你不加linear-gradient就不会有线性渐变的效果。（关于border-image有很多的用法，你可以参考css手册。）
以上是关于怎样用css实现图片的渐变？如图的主要内容，如果未能解决你的问题，请参考以下文章