CSS背景不透明度[重复]

Question

这个问题在这里已有答案：

• How do I give text or an image a transparent background using CSS? 28回答

我使用类似于以下代码的东西：

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

我预计这会使背景的不透明度为0.4，文本的不透明度为100％。相反，它们的不透明度均为0.4。

Answer 1

儿童继承不透明。如果他们不这样做，那就太奇怪了。

您可以将半透明PNG文件用于背景图像，或使用RGBa（用于alpha）颜色作为背景颜色。

例如，50％褪色的黑色背景：

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

Answer 2

您可以使用CSS 3 :before具有半透明背景，您只需一个容器就可以完成此操作。使用这样的东西

<article>
  Text.
</article>

然后应用一些CSS

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

样本：http://codepen.io/anon/pen/avdsi

注意：您可能需要调整z-index值。

Answer 3

可以使用以下方法解决您的问题：

1. CSS alpha透明度方法（在Internet Explorer 8中不起作用）： #div{background-color:rgba(255,0,0,0.5);}
2. 根据您的选择使用透明的PNG图像作为背景。
3. 使用以下CSS代码段创建跨浏览器Alpha透明背景。以下是#000000 @ 0.4％不透明度的示例

   .div {
       background:rgb(0,0,0);
       background: transparent\9;
       background:rgba(0,0,0,0.4);
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
       zoom: 1;
   }
   .div:nth-child(n) {
       filter: none;
   }

有关此技术的更多详细信息，请参阅this，它具有在线CSS生成器。

Answer 4

我会做这样的事情

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS：

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

它应该工作。这假设您需要具有BTW的半透明图像，而不是颜色（您应该使用rgba）。还假设您不能在Photoshop中预先更改图像的不透明度。

Answer 5

你可以使用Sass' transparentize。

我发现它是最有用和最简单的。

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

查看更多：#transparentize($color, $amount) ⇒ Sass::Script::Value::Color

Answer 6

.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}

Answer 7

这是因为内部div具有嵌入的div的不透明度的100％（其具有40％的不透明度）。

为了规避它，你可以做一些事情。

您可以创建两个单独的div，如下所示：

<div id="background"></div>
<div id="bContent"></div>

为背景设置所需的CSS不透明度和其他属性，并使用z-index属性（z-index）来设置和定位bContent div。有了它，你可以放置背景div的div翻转，而不会有它的不透明度。

---

另一个选择是RGBa。这将允许您嵌套div并仍然实现div特定的不透明度。

---

最后一个选项是在所需的图像编辑器中简单地制作一个半透明的.png图像，将background-image属性设置为图像的URL，然后你就不用担心了使用CSS并失去嵌套div结构的功能和组织。

Answer 8

只需确保前景的宽度和高度与背景相同，或者尝试使用顶部，底部，左侧和右侧属性。

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>