如何淡入淡出不同的背景，但不是文本

Question

我爲我的網站的不同部分使用不同的背景。我需要幫助淡化所有這些背景圖像，但不是其上的文字。 MY post

<div class="post" style="background-image: url(https://bensmann.no/wp-content/uploads/2017/01/New-Blue-Profile.jpg)"> 
    <div class="product"> 
    <h3>The Monarch</h3> 
    <p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p> 
    <a href="/posts/p9chargingonwheels.html" class="btn">Read More</a> 
    </div> 

.post { 
background-size: cover; 
background-attachment: fixed; 
height: 100%; 
position: relative; 
width: 100%; 
z-index: 1; 
background-position: center; 
opacity: 0.5; 

} 

Answer 1

使用唯一的類的職位，並指定你的CSS爲相應類別的背景圖像。

.post { 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 

 
.background { 
 
    position: relative; 
 
} 
 

 
.background:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    content: ''; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    opacity: 0.3; 
 
    z-index: -1; 
 
} 
 

 
.background1:after { 
 
    background-image: url(http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg); 
 
} 
 

 
.background2:after { 
 
    background-image: url(http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg); 
 
}

<div class="post background background1"> 
 
    <div class="product"> 
 
    <h3>The Monarch</h3> 
 
    <p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p> 
 
    <a href="#" class="btn">Read More</a> 
 
    </div> 
 
</div> 
 

 
<div class="post background background2"> 
 
    <div class="product"> 
 
    <h3>The Monarch2</h3> 
 
    <p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p> 
 
    <a href="#" class="btn">Read More</a> 
 
    </div> 
 
</div>