logo标签列表

用CSS更改背景不透明度

css
5
我该如何改变一个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个回答
5

你尝试过使用RGBa符号表示法吗？其中的'a'代表着alpha（不透明度或透明度）。

<style>
  .bg {
     background-color: rgba(0, 0, 0, 0.5);
     color: #ffffff;
   }
   </style>
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>
3

这段代码只改变背景透明度

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

使用rgba只更改背景透明度

.bg{
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
 }
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;
}
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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接