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 -->

这里只是我的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;
        }
    }
}

Qusetion：是否有一个CSS技巧来获取SVG背后的图像？或者我是否需要使用新的HTML结构才能获得所需的效果？

Answer 1

我建议在你的css中提供z - index css property的图像并且可能给它一个负的z - 索引，例如：#yourImage {z - index: -1;}，同时请记住你应该给SVG分隔符一个更大的z - 索引比图像，以便它位于它前面。警告：这可能会弄乱页面上的其他z-index元素。

将图像定位在svg元素后面的右下角

1 个答案: