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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: