Question

我目前正在为我的网站开发移动设计。在我的页面上，我有一个目前是SVG的图像，原因如下：图像上有一个文本覆盖图，当作为PNG导出时，质量都会丢失。我尝试将文本导出为SVG并将其分层放在png图像上，这也不起作用。当我使用谷歌Chrome的开发工具（选择iPhone 5）时，SVG图像加载非常好 - 我真的不知道发生了什么，我觉得我已经尝试了所有技巧。有办法吗？

您可以查看我正在处理的here页面，但不要忘记使用开发工具在iPhone 5上查看

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

虽然您只需要背景大小和背景来获得效果。其他风格只是强调结果...

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

SVG图像分层

1 个答案: