opacity属性怎么用

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

opacity属性是用来设置一个元素不透明度级别的，通过该属性我们可以设置图片、文字、盒子模型等等的透明度。

CSS3 opacity属性

作用：检索或设置对象的不透明度。

语法：

1

opacity: value|inherit;

value：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

inherit：应该从父元素继承 opacity 属性的值。

说明：对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果。

CSS3 opacity属性的使用示例

示例1：

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

32

33

34

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

h1 {

margin: 10px 0;

font-size: 16px;

}

.test,

.test2 {

width: 300px;

height: 150px;

padding: 10px;

}

.test {

background:#050;

}

.test2 {

margin: -120px 0 0 50px;

background: #000;

filter: alpha(opacity=50);

opacity: .5;

color: #fff;

}

</style>

</head>

<body>

<h1>下例是一个半透明的效果：</h1>

<div>不透明度为100%的box</div>

<div>不透明度为50%的box</div>

</body>

</html>

效果图：

1.jpg

示例2：使用 JavaScript 来改变元素的不透明度。

阅读剩余部分

相关阅读 >>

如何解决css3 media不起作用的问题

transition-property属性怎么用

border-image属性怎么用

详细了解css3中的border-image-slice属性

20个非常绚丽的html5/css3应用插件的详细介绍（图）

盒模型与bfc的深入讲解

css3中怎么调节透明度

css3多媒体查询的简单介绍（代码示例）

css3中结构性伪类选择器―:first-of-type实现名言标签（代码实例 ）

css中更改透明度的属性是什么

更多相关阅读请进入《opacity属性》频道 >>




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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