Question

我正在使用background-image属性将图片分配到我网站上div的范围内。但是，对于background-image属性，我还需要指定background-size才能使其正常显示。

这大部分工作正常，但我需要根据background-size属性中使用的文件类型更改background-image属性。例如，标准我想要用户background-size: cover;，但当background-image是SVG时，我想使用background-size: auto;

这是否可以使用CSS属性选择器？如果没有，还有其他任何解决方案吗？

我的尝试（SCSS）：

&.bg-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px;
    max-height: 700px;
    &[src$=".svg"] { background-size: auto; }
}

Answer 1

如果background-image是您唯一的内联CSS属性，则可以执行以下操作：

＆＃13;

.bg-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 300px;
    max-height: 700px;
}

.bg-image[style^="background-image:"][style$=".svg)"] {
  background-size: 103px 94px;
}

＆＃13;

<div class="bg-image" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg)"></div>

＆＃13;

如果background-image不是唯一属性，但它是最后一个属性，则可以使用此选择器：[style$=".svg)"]。

最后，最常见的情况是，对于style属性中background-image的任何位置，请使用此选择器：[style*=".svg)"]。

即使使用最松散的选择器：[style*=".svg)"]（或jpg或png ...），选择器可能应用的唯一声明就是背景图像。

另一种方法是将data-type=svg或你的内容添加到div中，然后将其定位到CSS [data-type=svg]中。

或者您可以使用img代替，例如。

使用CSS属性选择器来定位背景图像的src

1 个答案: