时间戳

首页 > 解决方案 > Div bootstrap 背景位置

html - Div bootstrap 背景位置

问题描述

问题

我有这个布局的问题。我想在这些框的中心放置一张应用程序的图片。对于带有文本的部分，图像在背景的顶部和底部下方可见是很重要的。我已经尝试了所有作为背景和普通图像（位置、z-index 等）的东西。我正在为 col 和 row 使用引导程序。我还需要这个在移动设备上看起来很漂亮。我需要设计来查看附加图片，但图片在背景前面的中间。有什么建议么？

当前代码和CSS：

<center> 
<div class="margin50">
<section class="appfeatures section-spacing">
<div class="container_appfeatures">
<div class="row">
    <div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-1 text-left"><img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon"></div>
    <div class="col-md-offset-4 col-md-1 text-right"><img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon"></div>
    <div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-1 text-left"><img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon"></div>
    <div class="col-md-offset-4 col-md-1  text-right"><img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon"></div>
    <div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>

</div>
</div>
</section>
</div>
</center>


.appicon_white {
width: 60px;
height: 60px;
    }

.appfeatures {

background: rgb(102,204,153);
background: linear-gradient(180deg, rgba(102,204,153,1) 0%, rgba(30,130,76,1) 100%);
opacity: 0.5;
}


.container_appfeatures {
width: 80%;

}



.margin50 {
margin-top: 75px;
margin-bottom: 75px;
width:100%; 
height:100%;
background-image: url("../img/profile.png");
background-repeat: no-repeat;
background-position: center center;
padding-top:95px;
padding-bottom:95px;
}

标签： htmlcssbootstrap-4

解决方案

不要col-md-offset-4只使用col-md-4，您必须<div class="row">在每一行中使用。在这里，我更新了您的 html 代码：

<center>
    <div class="margin50">
        <section class="appfeatures section-spacing">
            <div class="container_appfeatures">
                <div class="row">
                    <div class="col-md-3 col-sm-3 text-right">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon">
                    </div>
                    <div class="col-md-4"> </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon">
                    </div>
                    <div class="col-md-3 col-sm-3 text-left">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                </div>
                <img src="https://path to your iphone image">
                <div class="row">
                    <div class="col-md-3 col-sm-3 text-right">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon">
                    </div>
                    <div class="col-md-4"> </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon">
                    </div>
                    <div class="col-md-3 col-sm-3 text-left">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                </div>
            </div>
        </section>
    </div>
</center>

CSS 代码更新：

.appicon_white {
    width: 40px;
    height: 40px;
}

.appfeatures {
    background: rgb(102, 204, 153);
    background: linear-gradient(180deg, rgba(102, 204, 153, 1) 0%, rgba(30, 130, 76, 1) 100%);
    opacity: 0.5;
    margin: 170px 0;
    position: relative;
}

.container_appfeatures {
    width: 80%;
    margin: 75px auto;
}

.margin50 {
    width: 100%;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.margin50 img {
    max-width: 250px;
    width: 100%;
}

img.phone-middle {
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

jsfiddle：https ://jsfiddle.net/marksalvania/94uyLvp1/

然后在您的移动/较小的视图中，只需将其添加到您的媒体查询中，如下所示：

.col-md-3 {
    text-align:left;
    font-size: 10px; /*just adjust this to your desired size*/
}

.col-md-1,
.margin50 {
    display:none; /*this is just optional if you just want hide icons on mobile view. Much better if you will hide the phone image on mobile view for sleek and clean layout.*/
}

.your-other-styles {
    /*add your other styles here*/
}

推荐阅读