背景图自适应屏幕宽度,
程序员文章站
2022-05-01 08:10:02
...
直接上代码:
<div class="img-block">
<div class="right">
test
</div>
</div>
.img-block{
position: relative;
width: 100%;
background: url("your img url") center center no-repeat;
background-size: 100% auto;
&:before{
content:"";
padding-top: 41.6406%; // 530/1280
display: block;
}
.right{
position: absolute;
width: 50%;
right: 0;
top: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
}
}
上一篇: css设置背景图自适应高度
下一篇: 单例模式及常见写法分析(设计模式01)