html - 使用 CSS :after background-image in a reusable component 转换小部件

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");
  }
}

结果 Widget with backgroud-image

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;
}