Question

之前可能已经问过，但是可以根据数据属性用css设置背景图片吗？

我有这个：

<div class="imageWrap" data-bigImage="someURl" data-smallImage="someUrl"></div>

和我的CSS：

background-image: attr(data-bigImage url);
background-repeat: no-repeat;
background-size: cover;

我将这两种尺寸用于响应式解决方案，并且管理员可以更改数据属性，因此我无法设置特定文件的路径。

我该如何解决这个问题？是否有非JavaScript解决方案？

Answer 1

我不认为它可以按照你想要的方式完成。你可以做的是创建两个子div，并在它们之间切换。

<div class="imageWrap">
   <div class="bigImage" style="background-image:url('someUrl');"></div>
   <div class="smallImage" style="background-image:url('someUrl');"></div>
</div>

CSS看起来像这样：

.imageWrap .bigImage,
.imageWrap .smallImage{
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    display:block;
}
.imageWrap .smallImage{
    display:none;
}

@media screen and (max-width:sizeInPx){
    .imageWrap .smallImage{
       display:block;
    }
    .imageWrap .largeImage{
      display:none;
    }
}

但我更喜欢使用javascript解决方案，因为这不需要我预加载/缓冲两个图像。

CSS设置具有数据属性的背景图像

1 个答案: