CSS实现shimmer闪光效果时背景图显示异常如何解决

问题原因分析 #

• 你的.shimmer类设置了display: inline-block，如果div内部没有内容、也没有手动指定宽高，元素会默认缩到极小尺寸，背景图按照contain规则适配就会变得很小
• 两个类作用在同一个元素上时，-webkit-mask会覆盖整个元素区域（包括padding部分），干扰背景图的定位规则，导致背景图偏移
• 原有写法的shimmer效果作用在整个元素上，包括元素的padding、边框等区域，无法单独命中背景图

修复方案（可实现shimmer仅作用于背景图） #

思路是用独立伪元素承载背景图和shimmer效果，和原bottomhalf的布局逻辑隔离，互不干扰：

/* 原bottomhalf仅保留布局相关样式，不承载背景图 */
.bottomhalf{
  padding:10px;
  padding-bottom:4px;
  position: relative;
  /* 按需设置元素宽高，比如示例图片可设置 width: 200px; height: 120px;  */
}

/* 用before伪元素单独承载背景图和shimmer效果 */
.bottomhalf::before {
  content: "";
  position: absolute;
  inset: 10px 10px 4px 10px; /* 和父元素padding值完全对应，适配内容展示区域 */
  background-image:url("https://i.sstatic.net/MeQxk.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  /* shimmer效果仅作用于承载背景的伪元素 */
  -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}

HTML部分无需再加shimmer类：

<div class="bottomhalf">
  <!-- 这里放其他内容不会被shimmer效果影响 -->
</div>

修复说明 #

• 背景图和shimmer效果都迁移到独立伪元素上，和原元素的布局逻辑完全隔离，不会再影响原元素内的其他内容
• 伪元素的inset值和父元素padding完全对应，刚好适配padding内部的展示区域，背景图不会再出现偏移、缩小的问题
• 如果需要调整背景图的展示范围，只需要修改伪元素的inset值或者父元素的padding即可，灵活度更高

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