如何淡化我的背景而不是文字？

Question

我想開始我的博客，但我也想建立自己的網站。 我剛剛學習了如何使用Codecademy做到這一點。 我的問題是如何淡化背景，而不淡化文本？ 我找到了很多解決方案，但沒有一個對我有用。 我的網站： http : //beingatechnocrat.me/ HTML代碼：

<article>
  <div class="post" style="background-image: url(http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg)">
    <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>
</article>

CSS代碼：

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

Answer 1

您可以改為將背景應用於偽元素，並在偽元素上使用opacity

 .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-image: url(http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg); background-size: cover; background-attachment: fixed; background-position: center; opacity: 0.3; z-index: -1; } 

 <div class="post background"> <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>