Question

如何指定要在背景图像中交换的子类？

这是我的css：

.background-image-post{
    background-image:url('../images/posts/background-post.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}

我希望使用子类 post1 等更改依赖于帖子的图像，或者理想情况下在HTML中覆盖它但它不起作用。

有什么想法吗？

Answer 1

子类是错误的措辞。您所需要的只是一个额外的＆＃39; class，它创造了更高水平的特异性。

作为示例：所有具有班级background-image-post的div都获得了占位背景。但是，同时包含background-image-post和phil类的div将获得fillmurray背景，因为它的更具体。

＆＃13;

.background-image-post{
    display: inline-block;
    margin: 3px;
    background-image:url('//placehold.it/200x200');
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-image-post.phil {
    background-image:url('//fillmurray.com/200/200');
}

＆＃13;

<div class="background-image-post"></div>
<div class="background-image-post phil"></div>

＆＃13;

我可以使用子类来更改背景图像吗？

1 个答案: