css 怎么设置透明度渐变


本文摘自PHP中文网,作者藏色散人,侵删。

css设置透明度渐变的方法:首先创建一个HTML示例文件;然后在body中引入图片;最后使用“linear-gradient()”函数并且配合rgba来设置透明度渐变即可。

本文操作环境:windows7系统、HTML5&&CSS3版本、Dell G3电脑。

css设置透明度渐变

在CSS中可以使用linear-gradient()函数配合rgba()来设置透明度渐变。其中使用linear-gradient()函数设置渐变,使用rgba()设置来设置颜色透明度。

示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>图片透明度渐变实例演示</title>

<style>

.div1 {

box-sizing: border-box;

width: 400px;

height: 320px;

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(1.jpg)

}

.div2 {

box-sizing: border-box;

width: 400px;

height: 320px;

font-size: 22px;

padding-top: 100px;

overflow: hidden;

background: no-repeat center top / 100% 100%;

background-image: url(1.jpg)

}

</style>

<div class="div1">设置透明度渐变效果的图片</div>

<div class="div2">正常图片</div>

</body>

</html>

效果图:

阅读剩余部分

相关阅读 >>

css如何进行空格处理

css中的单选怎么做

css 背景不滚动的实现方法

css应该怎么设置超链接样式

怎么用div布局?

css怎么设置图片不平铺

css如何设置文字居中

css怎么设置a标签不可点击

css如何设置div水平居中

利用gulp实现压缩的实例

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...