css背景图片显示不完怎么解决?

css背景图片显示不完是什么原因?怎么解决?下面本篇文章就来给大家介绍一下css背景图片显示不完的解决方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

示例:

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

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

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

<div></div>

</body>
</html>

效果图:

设置div大小后

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

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

<div></div>

</body>
</html>

效果图:

更多前端开发知识,请查阅 HTML中文网 !!

以上就是css背景图片显示不完怎么解决?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读