Question

大家好我创建了一个父div .ima，其中一个div名为.txt当我向.ima提供不透明度时，不透明度会自动应用于.txt这是明显。但我不希望它是这样的。

只有.ima应为0.5不透明度且.txt中的文字应100％可见。

有办法做到这一点吗？

以下是fiddle

我尝试在.txt中将不透明度赋予1不起作用。我可能会以一种我不知道的错误方式这样做。可以帮忙吗？

在这里我提到了与问题不同，引用了可能的重复

他们已经建议使用 rgba 但是在这里我不想使用它因为如果我使用rgba那么这将变成黑色或其他颜色我们'提到。

我想在这里使用背景图片。

这是我提出的样本。

这样的事情是不可能的。

另外，我不想使用.png图像（半透明）。图像可能会发生变化，这就是原因。

感谢那些在这里给出答案的人。

Answer 1

最简单的方法是假设您只希望.ima的背景透明，在这种情况下，您应该移除opacity并建立background-colour，其值为{{ 1}}，在这种情况下rgba(X%,X%,X%, .5)没有继承任何东西，你可以继续。

.txt

透明背景的CSS：

<div class="ima">
    <div class="txt">
        ...
    </div>
</div>

但是如果你想让一些.ima { /* rgba is Red, Green, Blue, Alpha: * put in your colour as RGB then add opacity at the end */ background-color: rgba(255, 0, 0, .5); }的子节点继承透明度（例如文本和.ima以外的元素），那么最简单的方法是创建一个与维度相匹配的直接后代.txt并.ima规则：

opacity

CSS：

<div class="ima">
    <div class="txt">
        ...
    </div>
    <div class="ima__transparency">
        ...
    </div>
</div>

Example with background image

Answer 2

你不能继承不透明度，你的选择是：

调整您的标记，以便.txt不是.ima的孩子，然后使用绝对定位
请勿使用不透明度，将.txt覆盖与.ima相同的区域，并为.txt提供半透明背景

如果您的目标受众支持gradients和multiple backgrounds，you can layer an obscuring gradient over the image：

background: linear-gradient( rgba(255,255,255,0.5),rgba(255,255,255,0.5)),
            url('http://www.bing.com/az/hprichbg/rb/NewportOR_ROW5865752464_1366x768.jpg');

使用这种方法实际上只需要one div，如果只是文本和想要显示的图像。

Answer 3

使用photoshop创建一个png图像（1px / 1px）透明，不透明度为60％，并在父母中调用，即

.ima{
  background:url(imagename.png) repeat 0 0;
}

Answer 4

不幸的是，你不能使用不透明度，因为它是由设计继承的。

但是，如果您只是尝试使用rgba颜色语法使父div的背景颜色半透明，而对于不支持语法的旧版本，则可以使用后备颜色。

e.g。创建不透明度为50％的白色背景。

.parent{
    background: rgba(255, 255, 255, 0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF);   /* IE6 & 7 */
    zoom: 1;
}

/* IE9 hack to remove filter */
.parent:not(dummy) {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

过滤器中的前两个十六进制值表示背景的不透明度。有一个很好的解释和rgba到十六进制转换器here。

注意事项。使用这种技术揭示了IE中的一个错误，如果放置在容器的背景上，超链接将通过容器的背景显示，例如，如果用于生成模型背景。

Answer 5

您可以使用：在/：之前

HTML
<div>asdsadasd</div>
CSS

div{position:relative;} 
div:after{
content:''; 
position:absolute; 
top:0; 
left:0; 
width: 100%; 
height: 100%; 
background: #000; 
opacity:0.3; 
z-index: -1;}

Answer 6

问题是，opacity属性适用于整个块。这意味着如果对任何子元素应用1不透明度，它将具有朝向其父元素的最大不透明度。

我建议您使用半透明的PNG背景并添加修复程序，以便旧版本的Internet Explorer处理不透明度：

.ima {
   width:auto;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='url_to_transparent_image.png');
}

.ima[class] {
   background-image:url('url_to_transparent_image.png');
}

.txt {
   color:white;
}

也就是说，只有当你真的需要一个完全不透明的文字时才会这样。您还可以将父级的不透明度设置得更高，以便您的文本不会太透明，并避免使用“脏”CSS技巧。

如何制作一个子div不应该从父div继承不透明度？

6 个答案: