包含透明 SVG ins 的 img 元素的背景颜色未显示在 iOS 浏览器中答案

【问题标题】：background-color of img element containing transparent SVG ins't displayed in iOS browser包含透明 SVG ins 的 img 元素的背景颜色未显示在 iOS 浏览器中
【发布时间】：2014-08-30 02:47:06
【问题描述】：

我无法让 iOS 浏览器支持 SVG 图像元素的 background-color CSS 属性。我正在使用第三代 iPad（型号 MD366LL/A，iOS 6.1.3）进行测试。
我尝试了几个具有透明背景的 SVG 图像，并且浏览器不尊重在 img 元素上设置的背景颜色。祖先元素的背景颜色最终被显示出来。
使用透明 PNG 时不会出现同样的问题。此外，我测试过的其他浏览器支持在 img 元素上设置的背景颜色（Android 4.4 上的 Android Browser、Opera、Firefox、Dolphin Browser 和 Chrome；Ubuntu 13.10 x64 上的 Firefox 和 Opera）。我目前无法使用 iPhone。

一些示例代码（将 URI 替换为 img 元素的 src 属性中的透明 SVG 图像）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>

        <style type="text/css">
            html, body {
                margin: 0px;
                padding: 0px;
                position: relative;
            }

            .container {
                position: relative;
                width: 100%;
                background-color: #222222;
            }

            .image {
                width: 20%;
                background-color: #888888;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <img src="image.svg" class="image">
        </div>
    </body>
</html>

这是图像元素渲染中的错误，还是我遗漏了什么？如果是错误，是否有不需要添加额外标记的解决方法？

【问题讨论】：

标签： html ios css svg

【解决方案1】：

无法彻底测试您的问题，但如果这是问题，您可以通过包装图像来尝试以下操作。

HTML

<div class="images">
    <img src="image.svg"/>
</div>

CSS

.images {
    background: #333;
}

.images img {
    width: 20%;
}

更新：

这是一种更模块化的方法来布置图像列表。

您可以执行以下操作：

HTML

<div class="image-list">

    <div class="image-list__item">
        <img src="image.svg"/>
    </div>

    <div class="image-list__item">
        <img src="image.svg"/>
    </div>

    <div class="image-list__item">
        <img src="image.svg"/>
    </div>

    <div class="clearfix"></div>

</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.image-list {
    background: #333;
    padding: 12px;
}

.image-list .image-list__item {
    width: 20%;
    float: left;
    padding: 12px;
}

.image-list .image-list__item img {
    max-width: 100%;
}

.clearfix {
    clear:both;
}

DEMO 或 DEMO 使用列表项（更语义化的方法）。

【讨论】：

我会看看我能不能完成这项工作。有没有办法包装图像并将其与其他内联元素放在一起？
@Chase -- 查看更新的答案老兄。希望这可以帮助！查看演示以获得更好的洞察力。
我能够在移动 Safari 中设置透明 SVG 的背景颜色，而无需更改所有其他图像的背景。谢谢