降低背景图像亮度而不影响其内容

时间:2019-05-19 00:29:21

标签: html css bootstrap-4

我想在不影响内容亮度的情况下降低标题背景图片的亮度

即标题背景图片的亮度应降低,但标题内容的亮度应相同(不变)

我的CSS代码

 header {
   background-image: url(assets/bg.jpg);
   background-repeat: none;
   background-attachment: scroll;
   background-position: center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
   text-align: center;
   color: #fff;
  }
header .intro-text {
 padding-top: 100px;
 padding-bottom: 50px;
}


header .intro-text .intro-lead-in {
 font-family: "Playfair Display",sans-serif;
 font-style: italic;
 font-size: 22px;
 line-height: 22px;
 margin-bottom: 25px;
}

我的HTML代码

 <header>
    <div class="container">
    <div class="slider-container">
    <div class="intro-text">
        <div class="intro-lead-in">Welcome To Our Studio!</div>
        <div class="intro-heading">It's Nice To Meet You</div>
        <a href="#about" class="page-scroll btn btn-xl">Tell Me More</a>
    </div>
    </div>
 </div>
 </header>

0 个答案:

没有答案