Html 使用CSS转换小部件：在可重用组件中的背景图像之后

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

HTML

结果

---

我会这样做的。。。仅CSS

HTML

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

HTML

---

你是在问如何为同一个小部件标记/样式生成不同的背景图像吗？我相信我需要删除：after，然后将其放入JS或另一个带有背景信息的HTML标记中。例：。你怎么想？不知道，你的最终目标是什么。如果你每次都需要一个随机背景，你可以用几种方法来实现它，但不能用CSS。确切地说@markoffden，你有什么提示给我吗？嗯，你不能用CSS来实现。我要做的是在JS中创建一个带有背景url字符串的数组，然后在页面加载时获得随机字符串并将其作为背景元素

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

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

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

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

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

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