移动端网站Logo及页脚图片模糊问题求助（附HTML代码）

这问题挺容易搞定的，纯CSS就能实现，给你两个实用的思路：

方案一：媒体查询 + 模糊滤镜（最常用） #

利用CSS的媒体查询检测屏幕尺寸，当设备宽度小于移动端常用断点（比如768px，你可以根据自己的布局需求调整）时，给目标图片添加blur()滤镜。

针对你提供的HTML结构，直接写下面的CSS代码就行：

/* 默认桌面端样式：图片保持清晰 */
.logo img, footer img {
  filter: none; /* 明确取消模糊，避免意外继承 */
}

/* 当屏幕宽度≤768px（移动端）时应用模糊效果 */
@media (max-width: 768px) {
  .logo img, footer img {
    /* 模糊程度可自定义，比如1px/2px/3px，数值越大越模糊 */
    -webkit-filter: blur(2px); /* 兼容旧版webkit内核浏览器 */
    filter: blur(2px);
  }
}

方案二：针对特定图片精准控制 #

如果页脚里的图片有不同的模糊需求，或者你想单独给某些图片加效果，可以给这些图片额外加类名，比如给页脚图片加footer-img类：

<!-- 页脚图片示例 -->
<footer>
  <img src="images/footer-icon-1.png" alt="xxx" class="footer-img">
  <img src="images/footer-icon-2.png" alt="xxx" class="footer-img">
</footer>

然后在CSS里精准选择这些类：

@media (max-width: 768px) {
  .logo img, .footer-img {
    filter: blur(2px);
  }
}

额外小提示 #

• 模糊数值可以按需调整，blur(0)就是完全清晰，数值越大模糊程度越高；
• 如果想让模糊效果更柔和，可搭配opacity属性，比如opacity: 0.9;；
• filter属性在现代浏览器都支持，加-webkit-filter前缀是为了兼容一些旧版移动端浏览器（比如老版本Safari）。

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