小编给大家分享一下怎么设置CSS样式中的透明度，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
opacity属性
opacity:value|inherit;
value：用来设置不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit：应该从父元素继承opacity属性的值
例：
将图片设置为不透明
<body>
未设置透明度：
<imgsrc="images/5.jpg"style="width:100px;height:100px;">
设置了透明度：
<imgsrc="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。值越小，越透明。
案例分享
使用opacity属性制作一个若隐若现的向下的箭头
在这个案例中需要使用到CSS3中的animation动画属性，通过设置动画属性的值来规定动画执行的时间以及在动画过程中的透明度变化的设计
<style>
.box
{-webkit-animation:box5sinfinite;
-webkit-animation-fill-mode:both;
}
@-webkit-keyframesbox
{
from
{
opacity:0;
}
to
{
opacity:1;
}
}
</style>
</head>
<body>
<divclass="box">
<imgsrc="images/jiantou.png">
</div>
</body>
以上是“怎么设置CSS样式中的透明度”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
