网站Testimonial模块背景色适配问题：仅文本区域显灰色背景

Let's break down why your current setup isn't working and fix it step by step:

Key Issues in Your Code #

1. Syntax Error: In your desktop media query, .testimonial-texta has width: 50% missing a semicolon—this breaks the background-color property that follows it, which is why adding background to the text div didn't work.
2. Absolute Positioning Conflict: Your text content uses position: absolute, which takes it out of the normal document flow. This means the parent .testimonial-texta/.testimonial-textb has no height, so even if the background was applied, it wouldn't be visible.
3. Container Background Covers Image: Applying background to .pic-testimonial affects the entire container, including the image area, which is why you saw the image get covered.

Corrected CSS Code #

.testimonial-container { 
  width: 80%; 
  border: none; 
  margin: auto; 
} 

/* For mobile */ 
.testimonial-imga, .testimonial-imgb, .testimonial-texta, .testimonial-textb { 
  width: 100%; 
} 

.testimonial-imga, .testimonial-imgb { 
  float: left; 
} 

.testimonial-texta, .testimonial-textb { 
  float: left; 
  padding: 15px; 
  width: 100%; 
  text-align: center; 
  font-size: 1.3em; 
} 

.pic-testimonial::after { 
  content: ""; 
  clear: both; 
  display: table; 
} 

.testimonial-photo { 
  max-width: 100%; 
  height: 451px; 
} 

@media only screen and (min-width: 768px) { 
  /* for desktop */ 
  .pic-testimonial { 
    overflow: auto; 
    margin-bottom: 30px; 
    /* Removed background-color from container */
  } 

  .testimonial-imga, .testimonial-texta, .testimonial-imgb, .testimonial-textb { 
    width: 50%; 
  } 

  .testimonial-imga { 
    float: left; 
  } 

  .testimonial-imgb { 
    float: right; 
  } 

  .testimonial-texta { 
    float: right; 
    padding: 15px; 
    width: 50%; /* Fixed missing semicolon */
    background-color: #DFE3E6; /* Now this works */
    display: flex; /* Added flex to center content without absolute positioning */
    align-items: center;
    justify-content: center;
  } 

  .testimonial-textb { 
    float: left; 
    padding: 15px; 
    width: 50%; /* Fixed missing semicolon */
    background-color: #DFE3E6; /* Added background here too */
    display: flex; /* Added flex for centering */
    align-items: center;
    justify-content: center;
  } 

  .photo1 { 
    display: block; 
    height: 451px; 
    overflow: hidden; 
    position: relative; 
  } 

  .testimonial-photo { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
  } 

  /* Removed absolute positioning from text containers */
  .test-text, .test-text2 { 
    position: relative;
    width: 100%;
  } 

  .test-text p, .test-text2 p { 
    margin: 0; 
    text-align: center; 
    color: #235A4A;
  } 
} 

.testimonial-texta p, .testimonial-textb p { 
  color: #235A4A; 
}

Modified HTML (Minor Adjustment) #

You can keep your HTML mostly the same—just ensure the structure stays consistent:

<div class="testimonial-container"> 
  <div class="pic-testimonial"> 
    <div class="testimonial-imga"> 
      <figure class="photo1">
        <img class="testimonial-photo" src="http://www.artisanbelle.com/images/stories/amandac.jpg" alt="Amanda C">
      </figure> 
    </div> 
    <div class="testimonial-texta"> 
      <div class="test-text"> 
        <p>"These white topaz earrings are gorgeous. The stones catch the light and are so pretty. They can be dressed up or down and the craftsmanship is top quality. A great pair of earrings that go with everything." <br>- Amanda Coldwell</p> 
      </div> 
    </div> 
  </div> 
  <!-- Add more pic-testimonial blocks here -->
</div>

What Changed & Why #

1. Fixed CSS Syntax: Added the missing semicolon after width: 50% in .testimonial-texta and .testimonial-textb, so the background-color property is applied correctly.
2. Removed Container Background: Took background-color out of .pic-testimonial so it no longer covers the image.
3. Flexbox for Centering: Replaced absolute positioning on text content with flexbox on the text containers (display: flex, align-items: center, justify-content: center). This keeps the text in the document flow, ensuring the text container has height and the background color is visible.
4. Applied Background to Text Blocks: Added background-color: #DFE3E6 to both .testimonial-texta and .testimonial-textb so only the text areas get the gray background.

This setup will give you the gray background spanning the entire text block, with no overlap on the image, exactly as you wanted.

内容的提问来源于stack exchange，提问作者marsupials