html - div 元素中的数据属性并显示在::after 伪元素上

Question

这是我的代码。我想通过 div::after 伪元素上的 data-bg 显示我的图像。我总是得到网址，但我想要显示图像。

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

div:before {
  content: attr(data-bg);
  display: block;
}

<div data-bg="https://via.placeholder.com/150"></div>

Answer 1

代码修正

您的代码中有一些错误:

• 如果要获取请求url处的图片，需要使用url()
• 您正在使用内容而不是background-image

理论上，您的代码如果您喜欢以下经过更正的代码片段，请不要忘记添加内容并调整伪元素的大小。

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

div:after{
  content: '';
  background-image: url(attr(data-bg));
  width: 150px;
  height: 150px;
  display: block;
}

<div data-bg='https://via.placeholder.com/150'></div>

不幸的是，这行不通

background-image 属性不能很好地与 url(attr()) 配合使用，因此这里是另一个实现您想要实现的功能的代码片段。我们为元素声明一个 CSS 变量，而不是使用 HTML 属性。您可以查看更多详情in this related question

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

div:after{
  content: '';
  background-image: var(--bg-image);
  width: 150px;
  height: 150px;
  display: block;
}

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