能否使用attr()函数设置background-image？如何将HTML中img的src属性值传入CSS/Sass作为背景图

首先直接给结论：当前CSS标准下，attr()函数无法直接用于设置background-image这类需要URL类型值的属性。你尝试的background-image:url(attr(src));写法失效，是因为attr()目前仅支持为content、width、color等接受<string>、<length>、<color>类型的属性赋值，而url()需要的是合法的URL值，attr(src)返回的字符串无法被url()自动解析为有效的图片地址。

针对你“复用每个img的src作为自身背景图、避免重复样式”的需求，这里提供几种可行的实现方案：

方案1：CSS自定义属性（变量）+ 行内样式 #

这是最直观的静态方案，先在CSS中定义使用变量的规则，再给每个img通过行内样式传入对应的src值：

img {
  /* 用CSS变量作为背景图地址 */
  background-image: url(var(--img-src));
  /* 可选：隐藏原img的内置图片，只显示背景图 */
  opacity: 0;
  /* 保证img有尺寸，否则背景图看不到 */
  width: 300px;
  height: 200px;
}

<!-- 行内样式把src值传给CSS变量 -->
<img src="photo1.jpg" style="--img-src: 'photo1.jpg'" alt="Photo 1">
<img src="photo2.jpg" style="--img-src: 'photo2.jpg'" alt="Photo 2">

注：也可以直接把url()写进变量，比如style="--img-src: url(photo1.jpg)"，此时CSS里只需写background-image: var(--img-src);，效果是一样的。

方案2：JavaScript批量自动处理 #

如果页面中有大量img，不想手动写行内样式，可以用JS自动遍历所有img，把它们的src值动态赋值给CSS变量：

/* 同方案1的CSS规则 */
img {
  background-image: url(var(--img-src));
  opacity: 0;
  width: 300px;
  height: 200px;
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 遍历所有img标签
  document.querySelectorAll('img').forEach(imgEl => {
    // 把当前img的src赋值给CSS自定义属性
    imgEl.style.setProperty('--img-src', `'${imgEl.src}'`);
  });
});

这种方式完全不需要修改HTML结构，JS会自动完成所有img的属性提取和变量赋值，非常适合批量场景。

关于Sass变量的说明 #

你提到想用Sass变量实现，但要注意：Sass是预处理器，所有变量在编译阶段就会被替换为静态值，无法在运行时获取HTML中img的src（这是DOM运行时的动态内容）。因此Sass变量只能处理编译时已知的静态图片地址，动态复用src的需求还是得靠CSS变量或JS来实现。

总结：

• 直接用attr(src)设置background-image目前不被CSS标准支持，无法生效；
• 最推荐的方案是CSS自定义属性+JS批量赋值，既能满足动态需求，又能避免重复代码；
• 少量图片场景可以用行内样式手动设置变量。

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