CSS背景不透明度

Question

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

<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(a表示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透明度方法(在IE 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;
   }
   

有关此技术的更多详细信息,请参阅此文章,其中包含一个在线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) 

查看更多:http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method

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 图像，将背景图像属性设置为图像的 URL，然后您就不必担心弄乱使用 CSS 并失去嵌套 div 结构的功能和组织。