背景图片的位置及大小，background-size属性讲解

程序员文章站 2022-06-02 19:53:44

...

今天讲解一下简单的背景图片大小、位置，因为前段时间遇到手机上下留白太多，背景图片被拉伸的问题

主要是对background-size属性值的各个演示

使用的图片是这张 400*640大小
老规矩，直接代码效果图，大家肯定能看明白

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景图片的位置及大小，各属性讲解</title>
    <style>
        .bgimg1{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat;
            background-size: cover;
        }
        .bgimg2{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat center center;
            background-size: cover;
        }
        .bgimg3{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat;
            background-size: contain;
        }
        .bgimg4{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat center center;
            background-size: contain;

        }
        .bgimg5{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat;
            background-size: 100% 100%;

        }
    </style>
</head>
<body>
<!--图一是400*640-->
<!--图二是400*250-->
<div class="bgimg1"></div>
<br/>
<br/>
<div class="bgimg2"></div>
<br/>
<br/>
<div class="bgimg3"></div>
<br/>
<br/>
<div class="bgimg4"></div>
<br/>
<br/>
<div class="bgimg5"></div>
<br/>
<br/>
</body>
</html>