SVG图像分层

Question

我目前正在为我的网站进行移动设计。在我的页面上，我有一个图像，目前是一个SVG，原因如下:有一个文本覆盖在图像上，当导出为PNG时，两者的质量都丢失了。我尝试将文本导出为SVG并将其分层在png图像上，这也不起作用。当我在Google Chrome的开发工具(iPhone 5选择)SVG图像加载完美-我真的不知道发生了什么，我觉得我已经尝试了我所知道的每一个技巧。有别的办法吗?

你可以查看我正在制作的页面，但不要忘记在iPhone 5上使用Dev工具查看

Answer 1

我为您设置了一个片段，它或多或少地完成了您所说的。我在图像上有一个SVG。

代码很简单:

<div class="bg-img">
    <svg height="150" width="500">
      <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
      <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
      <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
      Sorry, your browser does not support inline SVG. 
    </svg>
</div>

CSS是:

.bg-img {
    background:transparent url(https://shanshad1.files.wordpress.com/2013/06/c1d53-its_magic.jpg?w=383&h=469) no-repeat center center;
    background-size:cover;
    padding:40px;
    min-height:400px;
}

虽然你只需要background-size和background来获得效果。其他样式只是强调结果…

.bg-img {
    background:transparent url(https://shanshad1.files.wordpress.com/2013/06/c1d53-its_magic.jpg?w=383&h=469) no-repeat center center;
    background-size:cover;
    padding:40px;
    min-height:400px;
}

<div class="bg-img">
    <svg height="150" width="500">
      <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
      <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
      <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
      Sorry, your browser does not support inline SVG. 
    </svg>
</div>