Css 具有attr背景图像的伪元素

在从父属性获取width背景源之后，我有soome DIVs，它应该是空的，并且包含伪元素。 下面是一个例子： html

---

我试过很多其他的方法，但都不管用。

你需要用固定的长度和高度来包装这个DIV。例如：

<div style="width: 200px; height: 200px;">
    <div class="slide-image" href="#adad" data-src="some-src"></div>
</div>

或者给幻灯片图像以固定的大小和高度

见示例：

---

许多浏览器不支持使用

attr（）

作为

内容以外的任何内容的值，

，并且没有理由将其用于其他任何内容，因为这与内联CSS相比没有任何改进。你的意思是我只能使用JavaScript来实现这一点吗？

   .slide-image {
        overflow: hidden;
        height: 100%;
        width: 100%;
    }
    .slide-image:after {
        content: "";
        background-color: #c2c2c2;
        display: inline-block;
        color: red;
        height: 100%;
        width: 100%;
        background-image: attr(data-src url);
    }

<div style="width: 200px; height: 200px;">
    <div class="slide-image" href="#adad" data-src="some-src"></div>
</div>