css不透明度的设置方法

  介绍

小编给大家分享一下css不透明度的设置方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

css不透明度的设置方法:首先创建一个HTML示例文件,然后用img标签引入图片;最后在风格标签中添加css样式为“不透明度:0.5;”即可设置图片的透明度。

css可以使用过滤器:α()与不透明两种方式设置不透明度,直接利用透明度设置不透明度的时候其大小范围为0 - 1,使用过滤器:α()设置时大小范围在1 - 100之间。

 css不透明度的设置方法

过滤器:α()与不透明度一样都是设置透明度的,但是透明度在IE8及以下是不兼容的,所以要设置过滤器属性

答:hover {,,不透明度:1;,,过滤器:,α(不透明度=100);}

当直接利用透明度设置透明度的时候其大小范围为0 - 1之间,为1的时候为不透明,当利用过滤器:α()设置不透明度的时候其大小范围为0 - 100之间,为100年的时候为不透明

过滤器:α()的基本属性

过滤器:α(不透明度、finishopacity、风格、startX startY, finishX, finishY)。

不透明度:透明度级别,范围是0 - 100,0代表完全透明,100代表完全不透明。

finishopacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0到100。

风格:设置渐变透明的样式,值为0代表统一形状,1代表线形,2代表放射状,3代表长方形。

startX和startY:代表渐变透明效果的开始X和Y坐标。

finishX和finishY:代表渐变透明效果结束X和Y的坐标。

透明度属性:

不透明度:,值|继承;

价值规定不透明度。从0.0(完全透明)到1.0(完全不透明)。

继承应该从父元素继承不透明度属性的值。

示例:

& lt; ! DOCTYPE  html>   & lt; html>   & lt; head>   & lt; style>   img  {   ,,不透明度:0.5;   }   & lt;/style>   & lt;/head>   & lt; body>      & lt; h2>图像透明度& lt;/h2>      & lt; p> opacity 属性规定元素的透明度。值越低,越透明:& lt;/p>      & lt; p> 50%,不透明度的图像:& lt;/p>      https://www.yisu.com/zixun/& lt; img  src="/我/照片/tulip-red.jpg " alt=坝艚鹣恪笨矶?" 600 "高度=" 400 ">      身体   

效果:

 css不透明度的设置方法

以上是“css不透明度的设置方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

css不透明度的设置方法