在我的背景中需要一些关于编码不透明度的建议[重复]答案

【问题标题】：Need some advise with coding Opacity in my background [duplicate]在我的背景中需要一些关于编码不透明度的建议[重复]
【发布时间】：2019-05-23 22:47:04
【问题描述】：

我有这个代码

<h2 style="background-color: #c0c0c0; padding: 1em; max-width: 15em; opacity: 0.2; ;margin: 1em 10px; text-align: right;"><strong>HANDMADE TIES
</strong>DISCOVER NOW</h2>
&nbsp;

但我无法弄清楚如何仅使背景不透明度，而文本保持其自己的颜色。我也希望文本 Handmade ties 是 H2 而 Discover now 是一个段落。

【问题讨论】：

请出示您的代码。
Daniel Murphy 代码在我的帖子中

标签： css opacity

【解决方案1】：

<h2 style="background-color: rgba(192, 192, 192, 0.5); padding: 1em; max-width: 15em;  ;margin: 1em 10px; text-align: left;"><strong>HANDMADE TIES
</strong>DISCOVER NOW</h2>
&nbsp;

【讨论】：

Hey Falguni 非常感谢你，但它不起作用，它从右到左改变了位置，我看不到盒子。它是完全透明的。
现在你可以查看我的答案了。你可以看到左对齐文本和透明灰色框

【解决方案2】：

似乎您正在尝试使背景颜色透明并希望字体内容保持不受背景影响。可能的解决方案是您可以在单独的 div 中添加透明背景，并在单独的 div 中添加内容。两个 div 应该有不同的 z-index。

所以它的代码是这样的：

<html>
<head>
<style>
#background{
position:fixed;
background:#c0c0c0;
opacity:0.2;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
}


#content-wrapper{
position:absolute;
z-index:2;
padding: 1em; 
max-width: 15em;
margin: 1em 10px; 
text-align: right;
}
</style>
</head>
<body>

<div id="background">
</div>
<div id="content-wrapper">

<h2>HANDMADE TIES</h2>
<p>DISCOVER NOW</p>


</div>


</body>
</html>

【讨论】：

@ Varun Setia 非常感谢您的意见，但我已经尝试过这段代码，它让一切都消失了。
太不幸了，您是否尝试过根据内容调整最大宽度。另外可以分享一下截图吗？我可以看看这个问题。
谢谢大家。都整理好了。干杯

【解决方案3】：

不透明度会影响元素的所有样式。尝试使用

background: rgba(192,192,192, 0.2);

希望对你有帮助。

【讨论】：

你好安吉，非常感谢。我试过这段代码，但背景是完全透明的，不知道为什么它把文本的位置从右到左改变了。不知道为什么。 :(