如何让背景图片不重复填充在div中

本文介绍了如何使用HTML和CSS实现图片填充至指定区域,并在图片之上进行元素布局的方法。通过设置div的宽度和高度,结合img标签的百分比尺寸属性,可以实现图片的填充效果。此外,还详细说明了如何利用position属性在填充好的图片上添加额外的布局元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.使用background,不能改变图片的大小,只能直接放进去;

2.用img标签可以做到填充:<div><img src="..."></div>  ,div设好了width和height,img给height:100%;width:100%即可(图片有可能会失真)

拓展:填充好图片后,怎么可以在上面布局:

定义一个层在图片上,这里要用到定位——position
<div class="divdemo"><img alt="" src="">
   <span class="demo"></span>
</div>

.divdemo{position: relative;}
.demo{position: absolute;}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值