1

我创建了一个简单的页面，并希望使用 SVG 图像作为背景。我知道 CSS 中的背景 SVG 存在支持问题，所以我不会走这条路。

我得到的代码适用于大多数浏览器，除了 IE7-8；SVG 显示在页面上所有其他内容之前的位置。

这是我的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf=8">
  <title>Southpoint</title>
  <style type="text/css">
    body {
      margin: 0 auto;
      padding: 0;
      width:1000px;
      position: relative;
      font-family: Arial;
    }

    #blue_circle {
      position: absolute;
      top: -50px;
      left: -600px;
      z-index: 1;
    }

    .container {
      position: relative;
      z-index: 10;
      padding-top: 200px;
    }

  </style>
</head>
<body>

<div class="container">
  <h1>Lorem ipsum</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis elit in odio luctus tincidunt.
    Pellentesque nec nisl augue. Ut eu quam sed purus imperdiet iaculis. Fusce eget mi id felis malesuada eleifend
    ut quis nisi. Donec quis orci purus. Duis ante nisi, fermentum vel dignissim vel, facilisis id mauris.
  </p>
</div>

<object id="blue_circle" data="blue_circle.svg" width="1200" height="750" type="image/svg+xml" />
</body>
</html>

和 SVG

<svg version="1.1" baseprofile="full" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="main_blue" x1="0" x2="0.5" y1="0" y2="1">
      <stop stop-color="#1e2c88" offset="60%" />
      <stop stop-color="#2386d4" offset="100%" />
    </linearGradient>
  </defs>
  <circle cx="600" cy="150" r="600" fill="url(#main_blue)" />
</svg>

所以我的问题是：如何让 SVG 位于 IE7-8 中的文本后面（其他浏览器工作正常）？

4

0 回答 0