html - 背景不透明度影响子文本
问题描述
这可能是重复的帖子,但我似乎找不到我的 html/css 布局的解决方案,提前道歉:
HTML 代码:
<section class="palm-section text-center" id="palm-section">
<div class="palm-img">
<h1>Palm Hotel</h1>
<div class="break-line"></div>
</div>
</section>
代码:
.palm-img h1{ /* Child text to background */
position: absolute;
top: 0;
padding-top: 10px;
font-size: 62px;
color: white;
font-weight: 400;
z-index: 1;
}
.palm-img{ /* Background */
position: relative;
width: 100%;
padding-top: 150px;
padding-bottom: 100px;
height: 100%;
background: url(/images/the-palm-962785_1280.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
color: white;
background-size: cover;
opacity: 0.5;
}
输出:
文本受到父背景不透明度的影响
更新:
CSS之前和之后不起作用,并且将背景埋在另一个div中似乎不起作用
解决方案
.palm-img h1{ /* Child text to background */
position: absolute;
top: 0;
padding-top: 10px;
font-size: 62px;
color: white;
font-weight: 400;
z-index: 1;
}
.palm-img{ /* Background */
position: relative;
width: 100%;
padding-top: 150px;
padding-bottom: 100px;
height: 100%;
color: white;
}
.palm-img::after {
content: "";
background: url(https://www.fillmurray.com/500/500) no-repeat center center fixed;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<section class="palm-section text-center" id="palm-section">
<div class="palm-img">
<h1>Non transparent text</h1>
<div class="break-line"></div>
</div>
</section>
您可以使用 strached 伪元素作为背景
推荐阅读
- postgresql - DataGrip PostgreSQL 存储过程错误
- c# - UWP C# PivotItem 无法识别命名空间
- jsf-2 - 我正在处理 jsf 中的 ViewScoped 注释,但没有得到正确的输出
- c# - OrmLite 传递参数的元组
- c# - 用于选择带有数值的大括号并忽略大括号内的空格的正则表达式
- css - 为什么 IE 11 不应用带有外部 CSS 的 SVG 样式?
- html - ng-multiselect-dropdown 自定义 css
- c# - WCF XML Post Request Only Partially Loading Object
- regex - 将单元格值转换为snake_case
- javascript - 从 null 值中过滤掉 props