使用CSS属性overflow:hidden时图片从暗色渐变显示是什么原因？

问题原因说明 #

1. 未设置overflow时出现横向滚动条的原因 #

• 页面存在宽度超出视口/父容器的元素：比如固定宽度的块级元素、未做自适应的大图、设置了负margin的元素、flex布局中子项未开启flex-shrink、多个inline-block元素总宽度超出父容器宽度等。overflow的默认值为visible，内容超出容器时不会被裁剪，超出部分会直接撑出横向滚动条。
• 盒模型计算溢出：元素设置了width: 100%的同时又加了padding、border，且没有设置box-sizing: border-box，会导致元素实际总宽度超过父容器，撑出横向空间。

2. 设置overflow: hidden后图片从暗色渐变显现的原因 #

• 懒加载触发时机变化：如果开启了图片懒加载（要么手动加了loading="lazy"属性，要么所用框架默认开启），设置overflow: hidden后浏览器会重新计算元素可见范围，原本在视口外就会加载的图片，被调整为进入可见区域前才触发加载，你就能看到完整的加载过程。
• 图片渐入动画效果：通常这类渐变效果是手动写的交互逻辑，一般会把图片初始状态设为透明度0，加上filter: brightness(0.2)之类的暗色滤镜，同时配置transition过渡属性，等图片加载完成后再把样式重置为正常状态。未设置overflow: hidden时图片在视口外就已经加载完成，你看不到过渡过程；设置overflow: hidden后加载时机和你浏览到对应区域的时机重合，就会看到从暗到亮的渐变效果。
• 背景图占位逻辑：如果用的是背景图，大概率设置了暗色渐变作为占位底图，等实际图片加载完成后再替换上层显示，这个过程加了过渡效果就会呈现你看到的显现效果。

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