如何设置CSS样式中的透明度


本文摘自PHP中文网,作者清浅,侵删。

CSS样式中透明度的设置方法:首先创建一个HTML示例文件;然后通过img创建一张图片;最后通过css中的opacity属性来设置透明度,其语法如“opacity: value|inherit;”。

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

在CSS中我们可以通过给元素添加opacity属性来改变它的透明度,opacity的值为0到1,值越小越透明

在页面中我们常常用到CSS中的一个样式来设置透明度,来美化页面,今天将和大家介绍如何使用CSS中的opacity属性,具有一定的参考价值,希望对大家有所帮助

opacity属性

1

opacity: value|inherit;

value:用来设置不透明度。从 0.0 (完全透明)到 1.0(完全不透明)

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

例:

将图片设置为不透明

1

2

3

4

5

6

<body>

未设置透明度:

<img src="images/5.jpg" style="width:100px;height:100px;">

设置了透明度:

<img src="images/5.jpg" style="opacity: 0.6;width:100px;height:100px;">

</body>

效果图如下:

注意:

在IE9, Firefox, Chrome, Opera 浏览器中使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x),x 能够取的值从 0 到 100。值越小,越透明。

【推荐课程:CSS课程

案例分享

使用opacity属性制作一个若隐若现的向下的箭头

阅读剩余部分

相关阅读 >>

div怎样设置边框和透明度样式

如何设置css样式中的透明度

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

css背景图片怎么设置透明度渐变

css如何设置图片透明度

css中的透明度该怎么设置

css怎么设置边框的透明度

css3中怎么调节透明度

css怎么设置背景图片的透明度

html img图片怎么设置透明度

更多相关阅读请进入《透明度》频道 >>




打赏

取消

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

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

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

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

评论

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