CSS调整图像背景的亮度而不是内容 [英] CSS adjust brightness of image background and not content

问题描述

该部分有一个背景图像的内容在上面。
我想减少只有背景图像的部分，而不是内容的亮度。

我已经尝试了下面，但是，亮度仍然适用而不仅仅是图片。

 <！ -  Section  - > 
< div id =section1> 
< div id =content> 
 
 
 
< h1 class =heading>标题文字< / h1> 
< h4 class =subHeading>小标题文字< / h4> 
 
 <！ - 呼叫行动按钮 - > 
< br>< br> 
<按钮>加入我们的等待列表< / button> 
 
< / div> 
  

 ＃section1 {
 background：url（'../ images / headerimage1.jpg'）center center no-repeat; 
 background-size：cover; 
 -webkit-filter：brightness（0.5）; 
 filter：brightness（0.5）; 
 padding-top：100px; 
 padding-bottom：100px; 
 padding-left：10％; 
 padding-right：10％; 
颜色：白色; 
 text-align：center; 
} 
 
 #content {
 -webkit-filter：brightness（1）; 
 filter：brightness（1）; 
 
  

解决方案

 < div id =       SECTION1 > 
< div id =content> 
< / div> 
< / div> 
  

CSS：

 ＃section1 {
 background：url（'../ images / headerimage1.jpg'）center center no-repeat; 
 background-size：cover; 
 position：relative; 
} 
 
 #content {
 position：absolute; 
} 
 
＃section1 :: before {
 content：''; 
 display：block; 
 position：absolute; 
 background-color：＃000; 
不透明度：0.5; 
宽度：100％; 
身高：100％; 
} 
  

The section has a background image with content on top. I want to decrease the brightness of only the background image in the section and not the content.

I have tried the below, however, the brightness still applies to all and not just the image.

<!-- Section -->
<div id="section1">
    <div id="content">



    <h1 class="heading">headline text</h1>
    <h4 class="subHeading"> Sub-headline text</h4>

    <!-- Call to action button -->
    <br><br>
    <button> Join our wait list </button>

</div>

#section1 {
background: url('../images/headerimage1.jpg') center center no-repeat;
background-size: cover;
-webkit-filter: brightness(0.5);
filter: brightness(0.5);
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 10%;
    padding-right: 10%;
    color: white;
    text-align: center;
}

#content {
  -webkit-filter: brightness(1);
filter: brightness(1);
}

解决方案

You can add a new element of transparent black that overlays just the background, with the contents of your div sitting in front of it.

<div id="section1">
    <div id="content">
    </div>
</div>

CSS:

#section1 {
    background: url('../images/headerimage1.jpg') center center no-repeat;
    background-size: cover;
    position: relative;
}

#content {
    position: absolute;
}

#section1::before {
    content: '';
    display: block;
    position: absolute;
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

这篇关于CSS调整图像背景的亮度而不是内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！