菜单 学习猿地 - LMONKEY

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

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

zhangst23 profile image zhangst23 ・1 min read

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

示例:

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

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

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

<div></div>

</body>
</html>

效果图:

1.jpg

设置div大小后

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

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

<div></div>

</body>
</html>

效果图:

2.jpg

评论 (0)