10.3

2022/6/29 23:20:29

编程Tag： background 10.3 consectetur elit odit quisquam Nihil

本文主要是介绍10.3，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>

这篇关于10.3的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

10.3

相关编程文章