如何不使背景图像透明

Question

As you can see in the picture, the background image is making the text unreadable. I wasn't sure whether to use z-index or any other property to fix this.

 .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

First, the design of dark gray with black text is not good for the eyes. To make the text more readable I'd use either a white text or very slightly gray text with a darker background... OR just go with a whiter background and black text.

Dark gray bg and white text: .aboutme { background-color: rgba(106, 106, 106, .9); color: #fff; } .aboutme { background-color: rgba(106, 106, 106, .9); color: #fff; }

White-ish/gray background with black text: .aboutme { background-color: rgba(255,255,255,.9); color: #000; } .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

I'd change it like this for a higher color contrast:

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

Answer 3

Did you get the codes or did you write them? the question you're asking is a little preposterous because, when you're using rgba 4. the value specifies opacity, so you see that transparent has increased too much because it is too low. If you remove this value or just make it 1, your problem will be solved.

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