Question

是否有方便的方法通过数据属性设置伪元素的背景图像？

我正在努力实现这样的目标，但我希望能够通过我的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?的副本，因为我在谈论伪元素。感谢您将此与我联系起来，但我已经意识到这些技术。

Answer 1

根据CSS compatibility table函数的attr，您只能使用attr规则中content返回的值（如果您想要任何形式的交叉） - 浏览器支持）。

因此，如果您想要实现类似于您希望的内容，则需要使用JavaScript，因为attr中无法使用background。

Answer 2

现在，这是不可能的。在未来，希望如此。使用attr()函数，您可以从元素中获取属性值。使用伪元素时，它从原始元素获取属性。因此，您可以background-image: attr('data-bg' 'url')获取data-bg属性并将其视为网址。

不幸的是，这在任何浏览器中都不支持，并且仍然是规范的一部分实验性（可能会被删除）。

＆＃13;

.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: attr('data-bg' 'url');
  background-size: cover;
  background-position: left center;
  z-index: -1;
}
.full-width .container {
  z-index: 99;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="full-width" data-bg="//unsplash.it/1080/1920">
  <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>

＆＃13;

使用data属性设置伪元素的背景图像

2 个答案: