Question

如您在图片中看到的，背景图像使文本难以辨认。我不确定是否要使用z-index或其他任何属性来解决此问题。

.about {
  background-image: url(https://images.pexels.com/photos/2059736/pexels-photo-2059736.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.aboutme {
  background-color: rgba(106, 106, 106, 0.783);
  box-shadow: 2px 2px 2px;
  padding: 2rem;
  margin: 2rem;
  flex: 1 200px;
}

<section>
  <div id="about" class="about">
    <div class="aboutme">
      <h1>About Me</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies necodio et ante tincidun </p>
    </div>
    <div class="aboutme">
      <h1>Music</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultrici sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
        eget, arc </p>
    </div>
    <div class="aboutme">
      <h1>Videos</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellCras dapibus. Vivamus elementum sempdun </p>
    </div>
  </div>
</section>

Answer 1

首先，深灰色和黑色文字的设计对眼睛不利。为了使文本更具可读性，我将使用白色文本或背景颜色较深的灰色文本... 或只使用白色背景和黑色文字。

深灰色背景和白色文字： .aboutme { background-color: rgba(106, 106, 106, .9); color: #fff; }

带黑色文本的白色/灰色背景： .aboutme { background-color: rgba(255,255,255,.9); color: #000; }

.about {
  background-image: url(https://images.pexels.com/photos/2059736/pexels-photo-2059736.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.aboutme {
  background-color: rgba(106,106,106, .9);
  box-shadow: 2px 2px 2px;
  padding: 2rem;
  color: #fff;
  margin: 2rem;
  flex: 1 200px;
}

<section>
  <div id="about" class="about">
    <div class="aboutme">
      <h1>About Me</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies necodio et ante tincidun </p>
    </div>
    <div class="aboutme">
      <h1>Music</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultrici sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
        eget, arc </p>
    </div>
    <div class="aboutme">
      <h1>Videos</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellCras dapibus. Vivamus elementum sempdun </p>
    </div>
  </div>
</section>

Answer 2

我会像这样更改它以获得更高的色彩对比度：

.aboutme {
  background-color: rgba(106, 106, 106, 0.9);
  color: #fff;
}

Answer 3

您是否获得了代码或编写了代码？您要问的问题有点荒谬，因为在使用rgba 4时，该值指定不透明度，因此您会看到透明度增加得太多，因为它太低了。如果您删除此值或将其设置为1，您的问题将得到解决。

.about {
  background-image: url(https://images.pexels.com/photos/2059736/pexels-photo-2059736.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.aboutme {
  background-color: rgba(106, 106, 106, 1);
  /* or background-color: rgb(106, 106, 106)*/
  box-shadow: 2px 2px 2px;
  padding: 2rem;
  margin: 2rem;
  flex: 1 200px;
}

<section>
  <div id="about" class="about">
    <div class="aboutme">
      <h1>About Me</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies necodio et ante tincidun </p>
    </div>
    <div class="aboutme">
      <h1>Music</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultrici sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
        eget, arc </p>
    </div>
    <div class="aboutme">
      <h1>Videos</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellCras dapibus. Vivamus elementum sempdun </p>
    </div>
  </div>
</section>

如何不使背景图像透明

3 个答案: