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

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

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

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

示例:

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

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background-size:cover; 
background: url

('https://ss.0133.cn/upload/article/000/000/013/5da3e4e32f6e0593.jpg-600') no-repeat;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图:

1.jpg-600

设置div大小后

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:200px;
height:200px;
background-size:cover; 
background: url

('https://ss.0133.cn/upload/article/000/000/013/5da3e4e32f6e0593.jpg-600') no-repeat;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图:

2.jpg-600

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

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

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

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

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

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

以上就是css怎么背景图片显示不全?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑