使用 CSS 属性选择器来定位 background-image 的 src答案

【问题标题】：Using CSS Attribute Selectors to target the src of background-image使用 CSS 属性选择器来定位 background-image 的 src
【发布时间】：2016-10-06 10:48:54
【问题描述】：

我正在使用 background-image 属性将图像分配给我网站上的div 范围。但是，对于background-image 属性，我还需要分配background-size 以使其看起来正确。

这大部分工作正常，但我需要根据background-image 属性中使用的文件类型更改background-size 属性。例如，作为标准，我想使用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; }
}

【问题讨论】：

您的代码实际上应该按预期工作。问题是什么？你能设置一个 sn-p 或 fiddle 吗？
你要检查css中的style属性并添加规则。我不认为这是可能的。这个答案可能会帮助你stackoverflow.com/a/8426901/886539
@Tigran 我不认为它针对的是 SVG 所在的 background-image 属性。它不是 img src 的一部分？

标签： css

【解决方案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;
}

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

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

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

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

另一种方法是将data-type=svg 或您拥有的内容添加到 div 中，然后在 CSS [data-type=svg] 中定位它们。

或者您可以改用img，如您的示例所示。

【讨论】：

原来，我还有另一个内联 CSS 元素。大概这意味着你的方法行不通？
您可以将其他 CSS 规则移动到样式表或仅使用 [style$=".svg)"] 并确保 background-image 在末尾，或使用 [style*=".svg)]"]。毕竟即使使用[style*=".svg)"]（或jpg，或png...），选择器可能应用的唯一声明就是背景图像。
啊，现在好像可以用了 &[style*=".svg"] { background-size: auto; } 只是一个小调整。您想将其转换为答案并且我可以标记为已接受吗？感谢您的帮助！
不客气！我更新了答案以包含最详尽的可用选项列表并添加了一个 sn-p。