CSS实现堆叠打孔纸张效果：如何保留纯色背景避免透明

解决方案 #

问题根源是后定义的background属性覆盖了此前设置的纯白背景，只需要将纯色背景与打孔径向渐变设置为多层背景，把纯色放在最底层即可解决透底问题，还可灵活调整打孔的位置。

核心修改代码

替换原.letter选择器中背景相关的属性即可：

.letter {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: 26px auto 0;
  max-width: 550px;
  min-height: 300px;
  /* 调整左内边距避免文字压到打孔点 */
  padding: 40px 40px 40px 50px;
  position: relative;
  width: 80%;
  /* 多层背景：底层纯白，上层打孔渐变 */
  background: 
    #fff,
    radial-gradient(#575450 6px, transparent 7px) repeat-y;
  background-size: 
    auto auto,
    30px 30px;
  /* 打孔点默认在左侧，如需放到右侧可改为 0 0, right 0 top 0 */
  background-position: 0 0, 0 0;
}

修改说明

• CSS多背景用逗号分隔，层级按书写顺序从高到低排列，纯白#fff放在最底层完全遮挡下方内容，不会透出下层纸张
• 径向渐变的非打孔区域改为transparent，直接透出底层纯白，避免渐变内置的浅灰和纸张底色不一致
• 可通过调整第二个background-position的水平数值，灵活控制打孔点的左右位置

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