css怎么让图片填满?

在css中,可以将div的高度和宽度属性设置为100%,同时使用background-size属性设置背景图片为100%,便可以实现背景图片铺满屏幕。

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-600);
        background-color: #eee;
    }
</style>

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

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

3、修改background,设置不重复

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

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

4、修改background-size为100%

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

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

更多CSS3相关技术文章,请访问CSS3答疑栏目进行学习!

以上就是css怎么让图片填满?的详细内容,更多请关注0133技术站其它相关文章!

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