3

在 Firefox 和 Chrome 中运行良好。Safari 只是不显示我的 SVG 背景图像。这是怎么回事？

HTML

<div class="container">
    <div class="row">
        <header class="span12 hero-unit">
            <h1>Timeline</h1>
        </header>
    </div>
    <div class="svg"></div>
</div>

CSS

.svg {
    width: 200px;
    height: 200px;
    background-image: url(../img/mars.svg);
    background-size: contain;
}

关联

http://distantfuturejosh.com/timeline/

4

3 回答 3

3

好的，我的问题是图形软件问题，而不是网络代码问题。但为了记录，我正在做的是在 Illustrator 中打开一个光栅 psd 并将其保存为 svg。正如 Erik 指出的那样，这只是在 svg 中嵌入了一个 png。为了解决这个问题，我只需在 illustrator 中选择对象，选择对象 > 图像跟踪 > 制作。然后我选择了我喜欢的图像跟踪预设（6 种颜色）并将其保存为 svg。工作精美。

于 2013-10-17T18:25:29.253 回答
0

您是否尝试过像这样离开“-image”？

background: url(../img/mars.svg);

参考使用 SVG 作为背景图像

于 2013-10-16T22:34:47.597 回答
-1

我只是在搜索不适用于 Windows safari 的 SVG 背景，经过广泛搜索后，我发现了这个问题。我用这样的线性渐变

background:url("../images/cover-blue-nodots.svg"), linear-gradient(87deg, #0577f4 0px, #53d3d4 100%);

它不起作用，我只是使用 webkit 并在其中提供所有这些东西，它就可以工作。

background:url("../images/cover-blue-nodots.svg"), linear-gradient(87deg, #0577f4 0px, #53d3d4 100%);
background:url("../images/cover-blue-nodots.svg"), -webkit-linear-gradient(87deg, #0577f4 0px, #53d3d4 100%);
于 2017-07-19T11:23:54.993 回答