Question

我的首页上有一个小部件，我想多次使用，但有另一个背景图像。我试图放置另一个可以重现CSS行为的元素：之后但没有成功。你知道最好的方法吗？

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

使用CSS转换小部件：在可重用组件

1 个答案: