Question

我有这个代码

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

但是我无法弄清楚如何仅使背景不透明，而文本仍保持其自身颜色。另外，我希望“手工联系”文本为H2，而“立即发现”为段落。

Answer 1

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

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

希望有帮助。

Answer 2

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

Answer 3

似乎您正在尝试使背景色透明，并且希望字体内容保持与背景无关。可能的解决方案是您可以在单独的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>

在我的背景中需要一些编码不透明度的建议

3 个答案: