菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

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

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

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

入驻
86
0

css怎么让图片填满?

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

css怎么让图片填满?

1、新建一个HTML文件,使用div标签创建一个模块,并设置其class属性为myclass。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="myclass"></div>
</body>
</html>

(推荐学习:CSS视频教程

2、在<style></style>标签里设置div的样式,使用background属性设置div的背景图片。

<style>
    .myclass{
        height: 120px;
        background: url(star.jpg);
        background-color: #eee;
    }
</style>

默认效果是重复显示的,所以图片是填满div的。

Snipaste_2020-01-06_13-53-17.jpg

3、修改background,设置不重复

<style>
    .myclass{
        height: 120px;
        background: url(star.jpg) no-repeat;
        background-color: #eee;
    }
</style>

Snipaste_2020-01-06_13-52-39.jpg

4、修改background-size为100%

<style>
    .myclass{
        height: 120px;
        background: url(star.jpg) no-repeat;
        background-color: #eee;
        background-size: 100% 100%;
    }
</style>

Snipaste_2020-01-06_13-55-29.jpg

发表评论

0/200
86 点赞
0 评论
收藏
为你推荐 换一批