用CSS转换小部件:在可重用组件中的背景映像之后

Question

我有一个小部件在我的头版，我想使用很多次，但与另一个背景图像。我试图在CSS中添加另一个可以复制行为的元素:after，但没有成功。你知道最好的方法吗？

HTML

<div class="widget-2 panel no-border bg-primary widget widget-loader-circle-lg no-margin">
    <div class="panel-body">
        <div class="pull-bottom bottom-left bottom-right padding-25">
            <br>
            <h3 class="text-white">My Title</h3>
            <p class="text-white hint-text hidden-md">Lorem Ipsum</p>
        </div>
    </div>
</div>

CSS (减)

.widget-2 {
  &:after {
    background-image: url("@{assets-url}/img/social/person-cropped.jpg");
  }
}

结果带背景图的小部件

Answer 1

我会这样做的..。仅CSS

HTML

<div class="widget-2...." style="background-image: url(...); ">
  ....
</div>

CSS

.widget-2 {
  background-size: 0;
}
.widget-2:after {
  background-image: inherit;
}

当然，如果你觉得比标记更方便的话，你可以把资源作为类来使用。

HTML

<div class="widget-2 img1 ....">
  ....
</div>

CSS

.img1 {
  background-image: url(...);
}
.widget-2 {
  background-size: 0;
}
.widget-2:after {
  background-image: inherit;
}