html不透明度怎么设置

html中如何调整图片透明度？透明度设置方法

哦，跟你聊这个真是一件无聊的事，但总有人问起。
我告诉你，调整图像透明度最常用的方法是CSS中的opacity属性。
这件事很简单：它直接增加图像的透明度。

我记得有一天，当我在一个个人网站上工作时，我有一面旧照片墙。
我希望它看起来不那么突兀，所以我将整体图像不透明度设置为 0.8 你看，代码是这样的：你可以通过简单地添加一个样式标签来做到这一点。
我当时用的是Chrome，效果很棒。
画作只是徒然地漂浮在墙上，给人一种年代久远的感觉。

但是，有时您的照片会被用作背景图像。
例如，我之前创建一个宣传页面时，我使用了水平图像作为背景，但前景中有文字。
如果整个背景图像是透明的，则文本也会变得模糊。
这次你必须使用rgba。
当时我写了 .banner{background:url('Landscape.jpg') 非重复中心；背景大小：封面；背景颜色：rgba(2 5 5 ,2 5 5 ,2 5 5 ,0.7 );}。
你看，加了一层半透明的白色叠加，背景模糊了，但前景的文字还是清晰的。

此外，如果您仍然想做一些特殊的事情，例如向图像本身添加一些滤镜，例如模糊或灰度，此时可以使用滤镜属性。
不过，这款产品的兼容性很一般。
我之前尝试过，发现老版本的IE打不开。
您会看到，该代码调整了透明度并添加了模糊效果。

最好笑的事情是什么？只需使用悬停即可创建动态效果。
我曾经与相册进行交互，当我将鼠标悬停在相册上时，图片逐渐变得清晰。
代码：.photo{不透明度：0.6 ;过渡：不透明度 0.3 秒；}.photo:hover{opacity:1 ;}。
你看，默认图像是半透明的。
一旦你将鼠标悬停在它上面，它就会立即变得完全透明。
我当时用的是Firefox，效果特别流畅。

一般来说，如果你只是想要整个图像的透明度，只需使用不透明度。
如果希望背景图像透明但前景内容清晰，请使用rgba。
如果想添加其他滤镜效果，可以使用滤镜，但要注意兼容性。
如果您想创建交互效果，请使用悬停和过渡。
我告诉你，大多数情况下，不透明是最简单也是最常用的方法。

html 透明度

说白了，CSS不透明度控制是基于透明度的，但是要注意浏览器兼容性。
对于现代浏览器，首先使用 opacity:0.5 对于 IE 过滤器，您应该使用：alpha(opacity=5 0)。
对于 Firefox，添加 -moz-opacity:0.5 一切正常。
单独设置文本的透明度是非常烦人的。
建议添加一个 false 元素 ::before 或 ::after 文本并直接为 div 设置背景透明度。

去年我们做了一个H5 活动页面，用透明度实现了渐变遮罩。
当 iPhone 6 的白色边缘是透明的，0.3 或更低——行话中这称为“半透明闪白”，这是设备呈现透明 PNG 图像时的重影效果。
说实话，很混乱，不过后来我用SVG+mask解决了。
等等，还有别的事。
清晰度影响孩子的身体。
如果将