此效果比较难以形容,以至于不懂得如何搜索,自己写出点想法,请大家帮忙完善。
没有使用psd设计稿上的图片,我就简单的截图实现:
首先,此处要求是图在文之上,且伴随着不同浏览器的大小,将正常显示图文。
我的想法:
1.将图片当做背景来使用,这样宽度改变了,图片还是不会变化
css3中,存在object-fit这个属性,我现在使用的是 object-fit: cover;
2.设定一个绝对定位元素,position: relative;
3.将文字块以及图片进行相对定位,position: absolute;
以下是代码部分:
//css部分
<style>
.box{
width: 100%;
eight: 675px;
margin-top: 100px;
}
.box .txt-box {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
.box .txt-box .txt-box-t{
position: absolute;
width: 100%;
height: 336px;
border-radius: 10px;
background-color: #dbb583;
opacity: 0.6;
color: #000;
}
.box .txt-box .txt-box-i{
position: absolute;
width: 300px;
height: 200px;
left: 300px;
top: 100px;
}
.box .txt-box .txt-box-i img {
width: 100%;
height: 200px;
object-fit: cover;
}
</style>
//html部分
<div class="box">
<div class="txt-box">
<div class="txt-box-t">我在底下</div>
<div class="txt-box-i">
<img src="./test.jpg" alt="sky">
</div>
</div>
</div>