Question

我正在尝试重新创建this页面，现在它看起来很不错但是当我尝试添加iphone图片时，页面变得像this我在背景上放置的线性渐变图像溢出在底部并按下按钮。有没有办法解决这个问题，所以线性渐变只覆盖背景图像？谢谢

#body {
    background: url(assets/bg_home.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 70%;
    background-position: top center;
    display: block;
    position: relative;
}

#body::before {
    content: "";
    background-image: linear-gradient(#1659e0, #489AEA);
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

<div id="body">
    <nav>
        <!--navbar here-->
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-8 content">
                <h1>Meet BestApp</h1>
                <h1>The new world for chat</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis deleniti cumque, odit atque molestiae totam facere aliquam sed cum perspiciatis quam, at sequi, corporis distinctio. Fugit nam, nesciunt quaerat pariatur.</p>
            </div>
            <div class="col-md-4 image">
                <img src="assets/phone.jpg" alt="phone ">
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <button class="button"> LEARN MORE</button>
            <button class="button"><i class="fa fa-cloud-download" aria-hidden="true"></i> DOWNLOAD APP</button>
        </div>
    </div>
</div>

Answer 1

您可以为该图片提供一个类或ID，并为其创建一个CSS规则，其中包含position: absolute;和必要的top，left，width和{{1值（根据需要调整它们）。

此外，图片的容器应该height才能生效。

这会将图像放在与其容器相关的其他元素上。

Answer 2

最简单的方法可能是让手机在其所在的容器外流血。您可以通过将其设置为<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent">  <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:id="@+id/menuButton" android:layout_width="100dp" android:layout_height="50dp" android:text="Menu" /> </FrameLayout>  <ListView android:id="@+id/left_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" android:background="#111"> </ListView> </android.support.v4.widget.DrawerLayout>来实现此目的。

position: absolute;

#body {
    background: url(assets/bg_home.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 70%;
    background-position: top center;
    display: block;
    position: relative;
}

#body::before {
    content: "";
    background-image: linear-gradient(#1659e0, #489AEA);
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

.image img {
  position:absolute;
}

防止图像上的线性渐变溢出

2 个答案: