如何通过div的data-bg自定义属性在::after伪元素上正常显示图片

API 探路者

2026-9-29

你的代码目前是直接把data-bg的属性值作为伪元素的文本内容返回，自然只会显示URL字符串，不会加载成图片。当前原生CSS暂不支持直接在url()中嵌套attr()函数动态拼接图片地址，推荐用更兼容的CSS自定义属性方案实现：

方案1：用CSS变量实现（推荐，兼容性好）

修改HTML代码

把图片地址封装成CSS变量放到div的style属性中：

<div style="--bg-image: url('https://via.placeholder.com/150')"></div>

修改CSS代码

两种写法可选：

写法A：直接通过content属性展示图片

body {
  background: red;
  width: 100vw;
  height: 100vh;
}

div::before {
  content: var(--bg-image);
  display: block;
}

写法B：作为背景图展示（更灵活，可控制大小、位置）

body {
  background: red;
  width: 100vw;
  height: 100vh;
}

div {
  /* 给父元素设置对应尺寸，可按需调整 */
  width: 150px;
  height: 150px;
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
}