美好的一天!我想问一下如何实现这种布局? 如您所见,有一个背景,然后是另一个不透明的容器 然后文本是透明的。
我尝试处理它但失败了,这是我目前的工作。我曾经将文本剪辑到背景中,它看起来像,但方法是错误的。
我的 HTML:
<div class="container-fluid" id="landing-sec">
<div class="container-fluid sec_about" >
<h1>stack overflow</h1>
</div>
</div>
这是我当前的 sass:
.sec_about
{
margin-top: 80px;
background-color:white;
height:450px;
opacity: 0.65;
filter: alpha(opacity=65); /* For IE8 and earlier */
h1
{
background: url('../img/bg1.jpg') no-repeat;
// text-rendering: optimizeLegibility;
text-transform: uppercase;
font-size: 65px;
font-weight: bold;
font-family: $roboto_bold;
text-align: center;
z-index: 2;
white-space: nowrap;
margin-top: 30px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
}
感谢您的帮助。我会很高兴地感激它,它将作为我的一课。
最佳答案
为此你必须使用background-clip
。检查这个 Codepen
或者看看下面的代码片段:
.sec_about {
position: relative;
}
.clip-text {
background-image: url(http://lorempixel.com/480/200/abstract/7);
font-size: 60px;
font-weight: 700;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}
<div class="container-fluid" id="landing-sec">
<div class="container-fluid sec_about" >
<div class="clip-text">stack overflow</div>
</div>
</div>
希望这对您有所帮助!
关于html - 不透明度 CSS 上的文本透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40491525/