html – 使用data属性设置伪元素的背景图像[复制]

参见英文答案 > How can I use a data attribute to set a background-image in CSS?                                    2个
有没有一种方便的方法来通过数据属性设置伪元素的背景图像？

我正在努力实现这样的目标,但我希望能够通过我的CMS在标记中设置背景图像：

.full-width {
  background-color: #ededed;
  width: 100%;
  position: relative;
  z-index: -1;
}
.full-width:after {
  content: '';
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  top: 0;
  background-image: url(//unsplash.it/1080/1920);
  background-size: cover;
  background-position: left center;
  z-index: -1;
}
.full-width .container {
  z-index: 99;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="full-width">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">
        <h2>Test 123</h2>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

不直接是How can I use a data attribute to set a background-image in CSS?的副本,因为我在谈论伪元素.感谢您将此与我联系起来,但我已经意识到这些技术.

解决方法

根据CSS attr函数的 compatibility table,您只能在内容规则中使用attr返回的值(如果您需要任何形式的跨浏览器支持).

因此,如果要实现与您希望的类似的东西,则需要使用JavaScript,因为attr不能在后台使用.