将图像放入图像内
发布于2023-12-26 22:15 阅读(1099) 评论(0) 点赞(7) 收藏(5)
使用CSS，有没有办法适应这个图像：
在这个手机图像内（只有手机边框）：
将其设置为背景图像将占用一个完整的矩形，该矩形不适合手机边框，但更多。
这就是代码的样子
<div class="leftPhone">
<img class="LRPhone" src="images/leftphone.svg" alt="">
</div>
解决方案
修剪手机图像周围多余的空白会有很大帮助，这样您就不需要在定位上胡闹。此外，图片和手机边框的尺寸/长宽比并不相同，因此您需要调整背景尺寸/位置以达到您想要的效果。但您真正需要做的就是设置边框半径以匹配手机图像。
.leftPhone {
background-image: url('https://i.stack.imgur.com/6XUJf.png');
background-repeat: no-repeat;
background-size: 150px 200px;
background-position: -30px -20px;
width: 88px;
height: 175px;
border-radius: 10px;
}
.leftPhone img {
position: absolute;
left: -48px;
top: -5px;
}<div class="leftPhone">
<img class="LRPhone" src="https://i.stack.imgur.com/sYhYo.png" alt="">
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/533298/bfb0552c48fff4a99358/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力