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

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属性,则可以执行以下操作:

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

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

如果background-image不是唯一的属性,但它是最后一个,你可以使用这个选择器:[style$=".svg)"].

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

即使使用最松散的选择器:( [style*=".svg)"]或jpg或png ...),选择器可能应用的唯一声明是背景图像.

另一种方法是添加data-type=svg或者你有什么东西到divs然后在CSS中定位它们[data-type=svg].

或者你也可以使用img,就像在你的例子中一样.