我有一个完整的宽度和高度部分 html 主页。我怎样才能将这个部分分成 3 行 div。每个 div 都是全宽并具有响应式背景图像。请建议我如何使用 css 和响应式页面来做到这一点。
下面是解决方案：
对于背景 2，在 css 代码或媒体查询响应式 css 末尾添加此媒体查询 css-
@media(max-width:767px){
.bg-2{background-position:right center;}
}
body,
html {
height: 100%;
}
.fullwidth {
display: flex;
flex-direction: column;
height: 100%;
}
.repeat-x {
flex:1;
background-size: cover;
background-repeat:no-repeat;
background-position:center center;
}
.bg-1{background-image: url(https://dummyimage.com/1920/800/0011ff.jpg&text=Image+1);}
.bg-2{background-image: url(https://dummyimage.com/1920/54e354/0011ff.jpg&text=Image+2);}
.bg-3{background-image: url(https://dummyimage.com/1920/fa4f17/0011ff.jpg&text=Image+3);}
@media(max-width:767px){
.bg-2{background-position:right center;}
}
<div class="fullwidth">
<div class="repeat-x bg-1"> </div>
<div class="repeat-x bg-2"> </div>
<div class="repeat-x bg-3"> </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
