html - 如何使 <p> 不继承 <span> 不透明样式?

标签 html css

<分区>

我正在尝试制作一个带有圆 Angular 和一点透明度的白色按钮。文字不应该是透明的。我尝试使用 opacity: initial对于 <p>风格,但它似乎不起作用。查看我的代码片段以更好地理解。

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;
}
<body>
<a href="#"><span class="button"><p>BUY NOW</p></span></a>
</body>

最佳答案

你可以使用 RGBA背景颜色的值而不是使用不透明度。

示例

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

关于html - 如何使 <p> 不继承 <span> 不透明样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36500627/

上一篇:html - 在堆叠上下文中插入一个元素及其 DOM 子元素和它的 DOM 孙子元素

下一篇:css - 固定半列而另一半滚动

相关文章:

javascript - 建立一个进度表,使步骤和仪表对齐

jquery - anchor 链接不在特定的 div 上

javascript - 如何在jquery中设置翻转方向?

html - 容器 div 水平重叠子项

CSS 自定义字体垂直偏移(错误?)

javascript - 如何选择与另一个有一定关系的某个表格单元格?

html - VS 代码的 EditorConfig 不起作用

javascript - 使用 jquery 禁用启用按钮

html - 如何在 "float:left"时修复父中心的 div 子项?

jquery - 如何水平对齐 bootstrap 3 radio 和 radio 的标签?