Question

我创建了一个简单的页面，并希望使用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中的文本后面（其他浏览器工作正常）？

IE7-8上的SVG z-index

0 个答案: