css背景大小的设置

Tao13197

于 2024-09-04 11:29:53 发布

阅读量193

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_60897029/article/details/141888925

版权

属性 background-size

属性值

第一种固定宽高大小700px 400px

第二种 100% 100% 表示百分比相对于父级元素计算会占满父级盒子

第三种 100% auto

第四种 cover 覆盖(不会让图片变形但是图片超出部分会被裁剪)

第五种 contain

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 800px;
            height: 400px;
            border: 1px solid black;
            background: url(https://i1.hdslb.com/bfs/archive/ed7621c97ab912738fa70e9fe5bf1c40f64b51b2.jpg@672w_378h_1c_!web-search-common-cover.avif);
            background-size: contain;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <!-- 背景尺寸大小设置
    属性 background-size
    属性值
    第一种 固定宽高大小700px 400px
    第二种 100% 100% 表示百分比相对于父级元素计算会占满父级盒子
    第三种 100% auto
    第四种 cover 覆盖(不会让图片变形但是图片超出部分会被裁剪)
    第五种 contain 
     -->
</body>
</html>