2

大家好，我创建了一个父 div .ima，其中一个 div 称为.txt当我赋予不透明度时.ima，不透明度会自动应用，.txt这是显而易见的。但我不希望它是这样的。

只.ima应该是 0.5 不透明度，并且文本.txt应该是 100% 可见的。

有没有办法做到这一点？

这是小提琴

我尝试将不透明度设置为 1，.txt因为它不起作用。我可能以我不知道的错误方式做这件事。有帮助吗？

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

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

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

这是我提出的一个样本。

诸如此类的事情是不可能的。

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

无论如何感谢在这里给出答案的人。

4

6 回答 6

5

执行此操作的最简单方法假设您只希望.ima' 的背景是透明的，在这种情况下，您应该删除opacity并建立background-colour值为 的 a rgba(X%,X%,X%, .5)，在这种情况下.txt不继承任何内容，您可以继续。

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

透明背景的 CSS：

.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规则的直接后代：

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

CSS：

.ima {
    position: relative;
}

.ima__transparency {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .5;
}

.txt {
    position: relative;
    z-index: 1;
}

带有背景图像的示例。

于 2013-08-05T12:16:44.243 回答
2

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

  • 调整您的标记，使其.txt不是子级.ima，然后使用绝对定位
  • 不要使用不透明度，.txt覆盖与背景相同的区域.ima并提供.txt半透明背景

  • 如果您的目标受众支持渐变和多种背景，您可以在图像上叠加一层模糊渐变：

    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');

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

于 2013-08-05T12:18:54.523 回答
0

您可以使用 :after/:before

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;}
于 2013-08-05T12:37:10.047 回答
0

使用 Photoshop 创建一个透明度为 60% 的 png 图像（1px/1px）并调用您的父 div 即

.ima{
  background:url(imagename.png) repeat 0 0;
}
于 2013-08-05T12:11:28.777 回答
0

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

但是，如果您只想使用 rgba 颜色语法和不支持该语法的旧版本 ie 的后备来使父 div 的背景颜色半透明，则可以。

例如，创建一个不透明度为 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 到十六进制转换器。

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

于 2013-08-05T12:27:06.623 回答
0

问题是，不透明度属性适用于整个块。这意味着如果您将 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 技巧。

于 2013-08-05T12:37:40.090 回答