질문

그림에서 볼 수 있듯이 배경 이미지로 인해 텍스트를 읽을 수 없습니다. 이 문제를 해결하기 위해 Z- 색인을 사용할지 또는 다른 속성을 사용할지 잘 모르겠습니다.

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

Expand snippet

답변1

첫째, 검은 색 글씨가있는 짙은 회색의 디자인은 눈에 좋지 않습니다.텍스트를 더 읽기 쉽게 만들기 위해 흰색 텍스트 또는 어두운 배경의 매우 약간 회색 텍스트를 사용합니다.또는 더 흰색 배경과 검은 색 텍스트를 사용하십시오.

진한 회색 bg 및 흰색 텍스트 : .aboutme {배경색 : rgba (106, 106, 106, .9); 색상 : #fff; }

검은 색 텍스트가있는 흰색 / 회색 배경 : .aboutme {배경색 : rgba (255,255,255, .9); 색상 : # 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>

Expand snippet

답변2

더 높은 색상 대비를 위해 다음과 같이 변경합니다.

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

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