Question

我试图制作一个带圆角和透明度的白色按钮。文本不应该是透明的。我尝试将opacity: initial用于<p>样式，但似乎无效。看一下我的片段，以便更好地理解。

＆＃13;

body {
  background-color: #264D38;
 }

.button {
	display: inline-block;
	width: 150px;
	border-radius: 2px;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #898989;
	opacity: 0.4;
	filter: alpha(opacity=40); /* Para IE8 e anteriores */
}

span.button > p {
	opacity: initial;
	padding: 10px;
	color: #ffffff;
	font-weight: bold;
    text-align: center;
}

.button:hover {
	background-color: #000000;
}

＆＃13;

<body>
<a href="#"><span class="button"><p>BUY NOW</p></span></a>
</body>

＆＃13;

Answer 1

您可以使用RGBA值作为背景颜色，而不是使用不透明度。

示例

.button { display: inline-block; width: 150px; border-radius: 2px; margin-top: 20px; margin-bottom: 20px; background-color: rgba(137,137,137,.4); }

Answer 2

不透明度会影响所有子元素。当父母有40％的时候，孩子的透明度不能为0％。

其他解决方案是仅设置半透明背景。

＆＃13;

body {
    background-color: #264D38;
}

.button {
    display: inline-block;
    width: 150px;
    border-radius: 2px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.1);
}

span.button > p {
    padding: 10px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

.button:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

＆＃13;

<body>
    <a href="#">
        <span class="button">
            <p>BUY NOW</p>
        </span>
    </a>
</body>

＆＃13;

Answer 3

首先，使用适当的代码结构。 span是内联类型，必须位于p元素中，这是一种块类型，因为@hungerstar表示它不是有效的标记。

然后你就可以这样做，用:before伪元素来设置span的背景和绝对位置：

See it here

Answer 4

您可以对background-color使用RGBA或HSLA。您可以改进标记，使其不再无效（您使用内联元素<p>包装块级元素<span>）。我们现在少了一个具有相同结果的元素。

rgba()和hsla()的

Support chart。

<a href="#"><span class="button">BUY NOW</span></a>

body {
  background-color: #264D38;
 }
.button {
    display: inline-block;
    width: 150px;
    padding: 26px 0;
    border-radius: 2px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgba( 137, 137, 137, 0.4 );
    color: #FFF;
    font-weight: bold;
    text-align: center;
}
.button:hover {
    background-color: #000;
}

演示JSFiddle。

如何使<p>不继承<span>不透明度样式？

4 个答案: