咨询：移动端网站封面图白色模糊及覆盖层变白致文字不清的修复方案

Hey there, let’s break down how to fix both of these mobile display issues for your site!

Most often, that white blur on your mobile cover image comes from a filter: blur() property applied directly to the image, or a pseudo-element (like ::before/::after) creating a blurred background layer—this is usually tied to a mobile-specific media query.

Here’s your step-by-step fix:

• Inspect the element: Toggle your browser’s mobile view (Ctrl+Shift+M for Chrome/Firefox), right-click the cover image, and select "Inspect". Look for CSS properties like filter, backdrop-filter, or a pseudo-element with a blurred background.
• Find the mobile media query: Look for rules wrapped in @media (max-width: 768px) (or your site’s mobile breakpoint)—this is where the blur is being enabled for smaller screens.
• Disable the blur effect: Add or modify the rule to turn off the blur. For example:

  /* Replace .cover-image with your actual element class/id */
  @media (max-width: 768px) {
    .cover-image {
      filter: none; /* Removes the blur */
    }
    /* If the blur is from a pseudo-element overlay */
    .cover-container::before {
      backdrop-filter: none;
      background: transparent;
    }
  }
  

  Skip !important if you can edit the original CSS directly—it’s cleaner that way!

That white overlay turning opaque on mobile is a common responsive design misstep—its transparency or color gets adjusted for mobile, making text hard to read. Here’s how to fix it:

• Locate the overlay element: Inspect the area covering your cover image in mobile view. Look for classes like .overlay, .hero-overlay, or similar.
• Check mobile-specific styles: In the dev tools, find the media query for mobile that’s modifying the overlay’s background-color or opacity. You’ll probably see something like background-color: rgba(255,255,255,0.7)—that high opacity is the culprit.
• Adjust the overlay for readability: Tweak the color or opacity to balance visibility of both text and the cover image. Try one of these options:
  • Make the white overlay more transparent:

    @media (max-width: 768px) {
      .hero-overlay {
        background-color: rgba(255,255,255,0.2); /* Lower opacity = less white wash */
      }
    }
    

  • Switch to a dark overlay (if your text is light-colored):

    @media (max-width: 768px) {
      .hero-overlay {
        background-color: rgba(0,0,0,0.3); /* Dark semi-transparent for better contrast */
      }
    }
    

• Test and refine: Play with the opacity value (the last number in rgba()) until your text pops while still letting the cover image show through.

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