css3 背景透明-如何在CSS中使用opacity设置背景颜色透明度

bendan520 css

2023-08-26 0 7,451 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

在构建网站时，我们通过background属性来设置背景颜色。默认情况下css3 背景透明，背景颜色的透明度为0。我们可以通过CSS代码来控制背景的透明度。

控制背景透明度的属性有：

filter:alpha(opacity:50); opacity:0.5; -moz-opacity:0.5;-khtml-opacity: 0.5;

opacity元素的所有后代元素都会一起透明，通常用于调整图像或模块的整体不透明度

例子：



<html>

<head>

<meta charset="utf-8">

<title>背景透明度</title>

<style>

.demo{

  padding: 25px;

  background-color:#000000;

  filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;

}

.demo p{

    color: #FFFFFF;

}

</style>

</head>

<body>    

 

<div class="demo">

    <p>背景透明，文字也透明</p>

</div>

</body>

除了以下方法外，还可以通过rgba方法将背景色设置为透明。

所谓RGBA颜色就是RGB三基色加上ALPHA。提供透明功能css3 背景透明，同时为背景添加颜色。

用法：

background:rgba(R,G, B, A);

接下来我们看一个通过rgba方法设置背景色透明度的具体例子：

<div class="title_div">背景颜色透明</div>

.title_div{

width: 200px;

height: 200px;

line-height: 30px;

text-align: center;

margin:0 auto;

background-color:rgba(220,38,38,0.2);

}