[分享]css不透明度的设置应用场景

CSS中的不透明度是一个常见的属性，它可以让我们控制一个元素的透明度和不透明度。这个属性在网页设计中有多种应用场景，比如说： opacity:0.5; /设置不透明度为50/ 1. 图片透明度 在网页...

CSS中的不透明度是一个常见的属性，它可以让我们控制一个元素的透明度和不透明度。这个属性在网页设计中有多种应用场景，比如说：

opacity:0.5; /*设置不透明度为50%*/ 

1. 图片透明度

在网页设计中，经常会把图片叠加到背景上，如果图片过于鲜艳或者与背景颜色不太协调，就会显得不自然。使用CSS中的不透明度可以让图片融入背景更自然。

img {
 opacity: 0.8; /*图片设置不透明度为80%*/
} 

2. 背景透明度

CSS中还有一个属性可以设置元素的背景透明度，即background-color:rgba(r,g,b,a)。其中最后一个参数a代表透明度，值从0到1，0表示完全透明，1表示完全不透明。

background-color: rgba(255, 255, 255, 0.7); /*设置背景为白色，不透明度为70%*/ 

3. 文字透明度

如果在网页设计中需要设置文字透明度，可以设置text-shadow属性来实现。

text-shadow: 0 0 1px rgba(0,0,0,0.2); /*设置文字阴影透明度为20%*/ 

在网页设计中，使用不透明度属性可以让页面更加美观和自然。但是要注意，不透明度设置过高会影响页面的可读性，所以要适度使用。