文章/答案/技术大牛

发布

社区首页 >问答首页 >你能用attr()作为背景图像吗？背景-图像:url(attr(Src))；

问你能用attr()作为背景图像吗？背景-图像:url(attr(Src))；
EN

Stack Overflow用户

提问于 2021-09-29 12:11:08

回答 1查看 571关注 0票数 0

我希望选择HTML上的src属性值，并将其传递给变量中的css/scss文件，以便将其添加到url()属性中：

<style>
     img[src]{
        background-image:url(attr(src));
        }
</style>

，对于每个不同的img，只需获取它们的src值，将其添加到url属性中，并使其成为背景图像，这样我就不必对每个不同的图像进行大量编码或编码。

我试过了，但不起作用，我也尝试使用自定义属性，但我想确认没有办法这样做或类似的解决方案。

谢谢

attr

html

css

sass

回答 1

Stack Overflow用户

发布于 2021-09-29 13:27:49

不，您需要javascript来获取value属性并将其用作其他地方的值。

这里有一个可能使用css var(--var)的示例，这样就可以很容易地重用它：

let imgs = document.querySelectorAll('body img');
[...imgs].forEach((img) => {
  img.setAttribute("style", "--bg: url(" + img.getAttribute('title') + ");");
});

img {
  padding: 5em;
  background:  var(--bg) 0 0 / cover ;
  box-shadow:inset 0 0 5em 
}

<img src="https://picsum.photos/id/1020/200/300" title="https://picsum.photos/id/1020/200/300">
<img src="https://picsum.photos/id/1025/200/300" title="https://picsum.photos/id/1025/200/300">
<img src="https://picsum.photos/id/1015/200/300" title="https://picsum.photos/id/1015/200/300">
<img src="https://picsum.photos/id/1025/200/300" title="https://picsum.photos/id/1025/200/300">
<img src="https://picsum.photos/id/1050/200/300" title="https://picsum.photos/id/1050/200/300">

直到整张桌子在https://developer.mozilla.org/en-US/docs/Web/CSS/attr()变绿

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69376139

复制

相似问题

问你能用attr()作为背景图像吗？背景-图像:url(attr(Src))；
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能用attr()作为背景图像吗？背景-图像:url(attr(Src))；EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能用attr()作为背景图像吗？背景-图像:url(attr(Src))；
EN