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