イメージをsvg要素の右下に配置する

Question

斜めのSVGセパレータの後ろにイメージを配置しようとしています。残念ながら...あなたが見ることができるように文字がページの背後にあるようにそれが見えるように、オオハシは、角度のついたSVGの三角形によって遮断され

：これは、我々はそれがどのように見えるしたいものですこれは、現時点では次のようになります。ここでは

は私の現在のHTML構造である：

<!-- hero --> 
<div class="container-fluid bg-hero padding-angled-medium"> 
    <div class="container"> 

     <h1>Learn <span>English</span></h1> 
     <h2>with someone perfect for you</h2> 
     <h4>Professional one-to-one English lessons with teachers who care</h4> 

     <div class="row"> 
      <div class="col-md-6"> 
       <div class="col-md-6"> 
        <a class="btn btn-hero center-block" href="<?php echo base_url('book/free'); ?>">Free Evaluation</a> 
       </div> 
       <div class="col-md-6"> 
        <a class="btn btn-secondary-cta default center-block" href="<?php echo base_url('courses'); ?>">View Courses</a> 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <img id="toucan" class="img-responsive pull-right" src="<?php echo base_url('Public/images/frontend/home/toucan.png'); ?>" alt=""> 
      </div> 
     </div> 

    </div> 
</div> 
<!-- end hero --> 

<!-- white angled svg --> 
<svg class="angled-div" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"> 
    <polygon points="100 0 100 10.1 0 10.1" fill="white"/> 
</svg> 
<!-- end white angled svg --> 

// hero 
.bg-hero { 
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, rgba(255,255,255,0) 50%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#4d000000',GradientType=0); /* IE6-9 */ 
    width:100%; 
    h1 { 
     font-size: $font-largest; 
     font-weight: 800; 
     span { 
      color: $brand; 
      text-transform: uppercase; 
      text-decoration: underline; 
      text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5) 
     } 
    } 
    h4 { 
     margin-bottom: 30px; 
    } 
    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) { 
     #toucan { 
      margin-top: 0px; 
     } 
    } 

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) { 
     #toucan { 
      margin-top: 0px; 
     } 
    } 

    /* Small Devices, Tablets */ 
    @media only screen and (min-width : 768px) { 
     #toucan { 
      margin-top: 0px; 
     } 
    } 

    /* Medium Devices, Desktops */ 
    @media only screen and (min-width : 992px) { 
     #toucan { 
      margin-top: -100px; 
      margin-bottom: -150px; 
     } 
    } 

    /* Large Devices, Wide Screens */ 
    @media only screen and (min-width : 1200px) { 
     #toucan { 
      margin-top: -100px; 
      margin-bottom: -150px; 
     } 
    } 
} 

Qusetion：：ちょうど包みここは私SASSコードは、そのスタイルのページでCSSのトリックはSVGの後ろに画像を取得することがありますか？または、希望の効果を得るために新しいHTML構造を作成する必要がありますか？

Answer 1

z - index css propertyあなたのCSSに画像を与えることをお勧めします。#yourImage {z - index: -1;}のように、負のz-インデックスを与えるかもしれません。また、SVGセパレータに画像より大きなzインデックスを与えるようにしてください。それはその前に置かれます。警告：これは、ページ上の他のz-index要素を混乱させる可能性があります。