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

概述参见英文答案 > How can I use a data attribute to set a background-image in CSS?                                    2个 有没有一种方便的方法来通过数据属性设置伪元素的背景图像？ 我正在努力实现这样的目标,但我希望能够通过我的CMS在标记中设置背景图像： .full-width { backg 参见英文答案 > 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 >  <div >    <div >      <div >        <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不能在后台使用.

总结

以上是内存溢出为你收集整理的html – 使用data属性设置伪元素的背景图像[复制]全部内容，希望文章能够帮你解决html – 使用data属性设置伪元素的背景图像[复制]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。