css半透明(透明度css)

css半透明

首要，咱们用大家比较了解的CSS属性opacity来改动div的布景色彩。
描绘：
外面大的div布景色彩为黄色，里边小的div的布景色彩为赤色，现在咱们需要设置大的div的布景色彩变成半通明状态，咱们将opacity的属性值设为0.5，代码如下：
HTML部分：
我是内容
CSS部分：
.aa{
width:250px;
height:250px;
background:yellow;
opacity:0.5;
}
.bb{
width:150px;
height:150px;
background:red;
}
效果图：
通明1.jpg
如图所示，布景色彩的确变成了半通明，但是里边小div的布景以及文字都变成半通明了，这可能不是咱们想要的效果，所以咱们一般不运用这种办法。当然了，如果在页面布局时，你期望div里边一切的都变通明，就用opacity。
接下来咱们用另一种办法，background-color:rgba(0,0,0,0~1)，运用这个办法就只会设置div布景通明，而不会影响到div里的内容。

相关文章引荐：
1.网页设计中css怎样实现布景通明?(示例)
2.css怎么设置通明度？设置通明度的两种办法（代码实例）
相关视频教程：
1.CSS视频教程-玉女心经版
HTM部分一样，只需要将opacity换成rgba即可。
代码如下：
.aa{
width:250px;
height:250px;
background-color:rgba(255,255,0,0.5);
}
.bb{
width:150px;
height:150px;
background:red;
}
效果图：
看图一望而知，大的div通明度改动以后，对里边的布景和文字都没有任何影响。所以咱们一般用background-color:rgba(0,0,0,0~1)来设置布景色彩通明。
以上介绍了两种方式改动div布景色彩的通明度，他们各有好坏，具体用什么办法，还要根据需要，找到最适合的办法，初学者能够多去练习，加深了解，期望对你有协助。

透明度css

CSS两种设置通明度方式：
opacity:设置布景通明度
rgba():设置色彩通明度
1.opacity
属性的作用是给布景色彩添加通明度，取值规模是0~1，
但也会让处于布景色彩中的字体一同通明，
单用作用很好
2.rgba（）：
R：红色值。正整数（0~255）
G：绿色值。正整数（0~255）
B：蓝色值。正整数（0~255）
A：通明度。取值0~1之间
rgba（）也可以添加布景色彩和通明度，但这个通明作用并不会影响到
其他元素，比如文字
两种通明作用也只是如虎添翼，过渡加上动画会很又立体感。