新网创想网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下怎么设置CSS样式中的透明度,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联是一家从事企业网站建设、成都做网站、成都网站设计、行业门户网站建设、网页设计制作的专业网站设计公司,拥有经验丰富的网站建设工程师和网页设计人员,具备各种规模与类型网站建设的实力,在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点数千家。
opacity属性
opacity:value|inherit;
value:用来设置不透明度。从0.0(完全透明)到1.0(完全不透明)
inherit:应该从父元素继承opacity属性的值
例:
将图片设置为不透明
未设置透明度:
设置了透明度:
效果图如下:
注意:
在IE9,Firefox,Chrome,Opera浏览器中使用属性opacity来设定透明度。opacity属性能够设置的值从0.0到1.0。值越小,越透明。
IE8以及更早的版本使用滤镜filter:alpha(opacity=x),x能够取的值从0到100。值越小,越透明。
案例分享
使用opacity属性制作一个若隐若现的向下的箭头
在这个案例中需要使用到CSS3中的animation动画属性,通过设置动画属性的值来规定动画执行的时间以及在动画过程中的透明度变化的设计
.box
{-webkit-animation:box5sinfinite;
-webkit-animation-fill-mode:both;
}
@-webkit-keyframesbox
{
from
{
opacity:0;
}
to
{
opacity:1;
}
}
以上是“怎么设置CSS样式中的透明度”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!