不透明度CSS上的文本透明度

时间:2016-11-08 16:08:14

标签: html css sass

美好的一天!我想问一下如何实现这种布局? 如你所见,有一个背景,然后另一个容器具有不透明度 然后文本是透明的。

enter image description here

我试图继续努力,但我失败了,这是我现在的工作。我曾经将文本剪辑到背景,它看起来像是什么但是方法是错误的。

enter image description here

我的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;
  }

}

感谢您的帮助。我很乐意欣赏它,它将作为一个教训为我服务。

1 个答案:

答案 0 :(得分:1)

您必须使用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>

希望这有帮助!