使用CSS更改背景不透明度

时间:2014-08-16 08:24:25

标签: css

如何更改div背景的不透明度,而不会改变文本或其中任何内容的不透明度?

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="bg">
        <h1>welcome</h1>
        <p>Hello world. Welcome to my site</p>
    </div>

</body>
</html>



<style>
    .bg{
        background-color: black;
        color: #ffffff;
    }
</style>

6 个答案:

答案 0 :(得分:5)

您是否尝试使用RGBa表示法,其中'a'代表alpha(不透明度或透明度)?

<style>
  .bg {
     background-color: rgba(0, 0, 0, 0.5);
     color: #ffffff;
   }
   </style>

答案 1 :(得分:3)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="bg">
        <h1>welcome</h1>
        <p>Hello world. Welcome to my site</p>
    </div>

</body>
</html>



<style>
    .bg{
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
    }
</style>

答案 2 :(得分:3)

此代码仅更改背景不透明度

.bg{
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
 }

答案 3 :(得分:2)

仅使用rgba

更改背景不透明度
.bg{
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
 }

答案 4 :(得分:0)

在CSS中使用rgba()实际上很容易,但是很多人都不知道。

大多数人都知道使用rgb(255,255,255)代替#FFFFFF来设置颜色

您可以设置背景不透明度(与透明度相反,其中1为实心,0为完全透明)。

.bg {
    background-color: rgba(0,0,0,0.5) //This sets background to black, with half transparency
    color: #FFFFFF;
}

答案 5 :(得分:0)

<style>
  .backgorund_opacity {
     background-color: rgba(0, 0, 0, 0.5);  /* 0.5 use for opacity ( 0.0-0.9 )*/ 
   }
   </style>

您也可以像

一样使用
.background {
    opacity: 0.5;
}