html 背景图全部显示,css怎么背景图片显示不全?

css设置背景图片显示不全是因为背景图片过大导致的,我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。

789fe207c7d07629125340114cb6dceb.png

其中导致背景图片显示不全的原因是:

设置背景图片所在div大小小于背景图片大小。

示例:

下面我们来看一下通过设置div大小来使背景图片完全显示:

div

{

width:100px;

height:100px;

background-size:cover;

background: url

('https://img.html.cn/upload/article/000/000/013/5da3e4e32f6e0593.jpg') no-repeat;

}

效果图:

645fab1fb1ac34ab949970d9be99bec7.png

设置div大小后

div

{

width:200px;

height:200px;

background-size:cover;

background: url

('https://img.html.cn/upload/article/000/000/013/5da3e4e32f6e0593.jpg') no-repeat;

}

效果图:

d3f20ef0344d232f3b54a5269796219e.png

css背景图片不显示问题,有以下几方面原因:

1、css没有被调用;请检查css调用是否成功。

2、css图片地址不对;请检查css图片地址是否正确。

3、div的高度没有固定,是auto或者没有设值;div设置错误容易导致背景图片高度太大则无法显示。

4、div被嵌套;查看嵌套的div是否设置正确。

5、div代码不规范;请检查div代码是否书写正确。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值