时间戳

首页 > 解决方案 > 如何不使背景图像透明

html - 如何不使背景图像透明

问题描述

正如您在图片中看到的，背景图像使文本无法阅读。我不确定是否使用 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>

标签： htmlcss

解决方案

首先，深灰色配黑色文字的设计不利于眼睛。为了使文本更具可读性，我会使用白色文本或带有较暗背景的非常浅灰色的文本......或者只使用更白的背景和黑色文本。

深灰色背景和白色文字： .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>

推荐阅读