程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

将图像放入图像内

发布于2023-12-26 22:15     阅读(901)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

7 0
收藏该文
已收藏

评论内容:(最多支持255个字符)