在右下角的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：是否有一個CSS技巧，以獲得SVG背後的形象呢？還是我需要工作一個新的HTML結構來獲得所需的效果？

Answer 1

我建議在你的css中給圖像z - index css property也許給它一個負z-索引，例如：#yourImage {z - index: -1;}，也要記住你應該給SVG分隔符一個比圖像更大的z - 索引，這樣它位於它的前面。警告：這可能會弄亂頁面上的其他z-index元素。