情景:
当容器整个背景是一张背景图片的时候,由于没有高度 也就无法渲染出全部图片, 这种情况可以用height:100vh,这个就相当于width:100% 但是 百分比单位是需要内容撑开高度的,而vh是直接有高度,这条属性的意思就是设置为屏幕100%的高度,不用内容撑开,
background-size:cover 使背景图片拉伸至跟容器一样大
background-position: center center 解决背景图片溢出效果不对
代码:
这样可以在移动端布局的时候大致解决背景图设置问题,可能还有问题 ,看到的希望多多提议
<div class="wrap"></wrap>
<style>
.wrap {
width: 100%;
height:100vh;
background-image:url(../assets/imgs/bg.jpg); //背景图片路径
background-size: cover;
background-repeat: no-repeat;
background-position: center center
}
</style>
网友评论