透明属性的一些介绍

opacity这个属性：

属性介绍：

 

opacity 属性设置元素的不透明级别。

 

语法：opacity: value | inherit;

 

属性值：

 

value 规定不透明度。【从 0 (完全透明)到 1(完全不透明)】

 

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

 

 

 

CSS 中无法直接给背景图片加 opacity 属性，可以使用下面的方法来给background-image加上我们想要的透明度opacity。

 

在文字层添加rgba样式实现半透明效果

 

方法：

 

背景图片层添加样式：background-size: cover; 和 position: relative;

 

在文字层添加样式 background:rgba(255,255,255,0.3) (白底透明，一般文字颜色用黑色系)或者 background:rgba(0,0,0,0.3) (黑底透明，一般文字颜色用白色系)

 

为什么不在背景图片层上设置 opacity:0.5（不透明度）?因为使用 opacity 设置元素的透明度是一个整体的透明度，会作用于所有后代元素，当你设置 opacity：0.5 的时候，背景图、背景色、文字都会变成半透明属性，所以想实现字体不透明是不行的。

而如果直接在文字层设置 rgba(0,0,255,0.5)，前三个属性是 RGB 颜色,最后一个属性表示的是透明度，用 rgba(0,0,255,0.5) 就可以实现背景透明字体不透明，rgba 不会影响内部的透明度。

 

利用滤镜实现半透明效果

方法：

 

背景图片层添加样式：相对定位 position: relative;

背景图片层利用伪元素，添加样式：绝对定位position: absolute;，滤镜不透明度 filter: opacity(50%);，content: '';（空内容）， z-index：-1(避免遮盖其他元素)。