菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
10
0

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

原创
05/13 14:22
阅读数 1522

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/200
10 点赞
0 评论
收藏
为你推荐 换一批