html - 将图像定位在 svg 元素的右下方

Question

我正在尝试将图像放在 Angular SVG 分隔符后面。这是我们希望的样子:

如您所见，巨嘴鸟被成 Angular SVG 三 Angular 形切断，因此看起来 Angular 色在页面后面......不幸的是，这就是它目前的样子:

这是我当前的 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 -->

以防万一这是我的页面样式的 SASS 代码:

// 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;
        }
    }
}

问题:是否有 css 技巧来获取 SVG 背后的图像？或者我是否需要使用新的 HTML 结构来获得预期的效果？

Answer 1

我建议在您的 CSS 中为图像赋予 z - index css property也许给它一个负的 z - 索引，例如:#yourImage {z - index: -1;}，还要记住你应该给 SVG 分隔符一个比图像，使其位于它的前面。警告:这可能会弄乱页面上的其他 z - index 元素。