10.3

2022-06-29 13:36:24 作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:500px;
            height:500px;
            background-color: #bfa;
            background-image: url("./img/1.jpeg");
            background-repeat: no-repeat;
            background-position:0 0;

            padding:10px;

            overflow:auto;


            /* 
                background-size 设置背景图片的大小
                    第一个值表示宽度
                    第二个值表示高度
                    如果只写一个，则第二个值默认是auto

                    cover 图片比例不变，将元素铺满
                    contain 图片比例不变，将图片在元素中完整显示
            */
            
            background-size:contain;
        }
        
        .box2{
            width:300px;
            height:1000px;
            background-image:url(./img/2.jpeg);
            background-repeat:no-repeat;
            background-position:100px 100px;

            /* 
                background-attachment
                    - 背景图片是否跟随元素移动
                    - 可选值：
                        scroll 默认值 背景图片会跟随元素移动
                        fixed 背景会固定在页面中，不会随页面移动
             */
             background-attachment: fixed;
             background-attachment: scroll;
             
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil dicta optio molestiae distinctio nostrum fugit hic. Rerum incidunt ut odit repudiandae omnis beatae, officia quisquam et veritatis, vitae eius quam?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil dicta optio molestiae distinctio nostrum fugit hic. Rerum incidunt ut odit repudiandae omnis beatae, officia quisquam et veritatis, vitae eius quam?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil dicta optio molestiae distinctio nostrum fugit hic. Rerum incidunt ut odit repudiandae omnis beatae, officia quisquam et veritatis, vitae eius quam?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil dicta optio molestiae distinctio nostrum fugit hic. Rerum incidunt ut odit repudiandae omnis beatae, officia quisquam et veritatis, vitae eius quam?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil dicta optio molestiae distinctio nostrum fugit hic. Rerum incidunt ut odit repudiandae omnis beatae, officia quisquam et veritatis, vitae eius quam?
        </div>
    </div>
</body>
</html>
标签：consectetur,10.3,background,odit,elit,quisquam,Nihil
来源： https://www.cnblogs.com/sherryyuan/p/16422989.html