CSS_图片篇&背景-蒲公英云

一、图片大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        body {
            background-color: antiquewhite;
        }
        .img-list {
            width: 190px;
            height: 470px;
            overflow: hidden;
            margin: 50px auto;
            background-color: #fff;
        }
        /* 设置图片的大小 */
        .img-list img {
            width: 100%;
        }
        .img-list li {
            margin-bottom: 9px;
        }
    </style>
</head>
<body>
    <ul class="img-list">
        <li>
            <a href="javascript:;"><img src="./img/1.webp" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="./img/2.webp" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="./img/3.webp" alt=""></a>
        </li>
    </ul>
</body>
</html>

二、图片缝隙解决方法

img{
vertical-align: bottom;
}

在这里插入图片描述

背景图片

background-size
作用：设置背景图片的大小
    第一个值表示宽度
    第二个值表示高度
    如果只写一个，则第二个值默认是auto
    cover图片的比例不变，将元素铺满
    contain图片比例不变，将图片在元素中完整显示

背景

背景说明	代码
background-color 设置背景颜色	background-color: #bfa;
background-image 设置背景图片	background-image: url(“./img/1.png”);
background-repeat 用来设置背景的重复方式	可选值：repeat-x 沿着x轴方向重复，repeat-y沿着y轴方向重复， no-repeat 背景图片不重复， repeat 默认值，背景会沿着x轴 y轴双方向重复
background-position 用来设置背景图片的位置	1、background-position: center; 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置，使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center；2、background-position: -50px 300px; 通过偏移量来指定背景图片的位置：水平方向的偏移量垂直方向变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            overflow: auto;
            background-color: #bfa;
            background-image: url("./img/2.jpg");
            background-repeat: no-repeat;
            background-position: 0 0;
            padding: 10px;
            /*
                 设置背景的范围 
                    background-clip 
                        可选值：
                            border-box 默认值，背景会出现在边框的下边
                            padding-box 背景不会出现在边框，只出现在内容区和内边距
                            content-box 背景只会出现在内容区
                    background-origin 背景图片的偏移量计算的原点
                            padding-box 默认值，background-position从内边距处开始计算
                            content-box 背景图片的偏移量从内容区处计算
                            border-box 背景图片的变量从边框处开始计算
            */
            /* background-origin: border-box;
            background-clip: content-box; */
            /* 
                background-size 设置背景图片的大小
                    第一个值表示宽度 
                    第二个值表示高度
                    - 如果只写一个，则第二个值默认是 auto
                    cover 图片的比例不变，将元素铺满
                    contain 图片比例不变，将图片在元素中完整显示
            */
            background-size: contain;
            /* 
                background-color
                background-image
                background-repeat
                background-position
                background-size
                background-origin
                background-clip
                background-attachment
                - backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
                    并且该样式没有顺序要求，也没有哪个属性是必须写的
                    注意：
                        background-size必须写在background-position的后边，并且使用/隔开
                            background-position/background-size
                        background-origin background-clip 两个样式 ，orgin要在clip的前边
             */
        }
        .box2{
            width: 300px;
            height: 1000px;
            background-image: url('./img/1.png');
            background-repeat: no-repeat;
            background-position: 100px 100px;
            /* 
            background-attachment
                - 背景图片是否跟随元素移动
                - 可选值：
                    scroll 默认值 背景图片会跟随元素移动
                    fixed 背景会固定在页面中，不会随元素移动
             */
            background-attachment: fixed;
        }
        .box3{
            border: 10px red double;
            padding: 50px;
            width: 500px;
            height: 500px;
            background: url('./img/2.jpg') #bfa  center center/contain border-box content-box no-repeat ;
        }
    </style>
</head>
<body>
    <div class="box3">
    </div>
    <!-- <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aut, odio iusto accusantium ipsum aliquid omnis facere sapiente, nobis vel dicta alias ducimus. Repellat similique unde eius tempore, quia quo.
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, accusamus quibusdam. Adipisci in dolorem qui accusantium accusamus voluptatibus magnam nesciunt minus enim quaerat! Quidem, rem. Ipsum amet praesentium enim aliquid!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam provident repellendus ipsum dolorum optio quo, iure eveniet beatae cupiditate rerum minus corporis illum aliquam illo ut quidem aliquid expedita deserunt.
        </div>
    </div> -->
</body>
</html>