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

最新推荐文章于 2024-04-12 10:32:25 发布

谷小伟

最新推荐文章于 2024-04-12 10:32:25 发布

阅读量1w

点赞数 1

分类专栏： css基础样式文章标签：背景 css

本文链接：https://blog.csdn.net/qq_38347669/article/details/81560869

版权

css基础样式专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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

主要是对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>

谷小伟

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
背景图片的位置及大小，background-size属性讲解

今天讲解一下简单的背景图片大小、位置，因为前段时间遇到手机上下留白太多，背景图片被拉伸的问题主要是对background-size属性值的各个演示使用的图片是这张 400*640大小老规矩，直接代码效果图，大家肯定能看明白 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta char...
复制链接

扫一扫