其他分享
首页 > 其他分享> > 2.背景缩放background-size:①图片的宽度 图片的高度；②某条边的长度等比缩放③50%④cover；⑤contain；

2.背景缩放background-size:①图片的宽度 图片的高度；②某条边的长度等比缩放③50%④cover；⑤contain；

作者：互联网

 

目录

 

一：背景缩放background-size:

二：背景图片二倍图

一：背景缩放background-size:

  <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            /* background-size: 图片的宽度 图片的高度; */
            /* background-size: 500px 200px; */
            /* 1.只写一个参数 肯定是宽度 高度省略了  会等比例缩放 */
            /* background-size: 500px; */
            /* 2. 里面的单位可以跟%  相对于父盒子来说的 */
            /* background-size: 50%; */
            /* 3. cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全 */
            /* background-size: cover; */
            /* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
            background-size: contain;
        }
    </style>
</head>

<body>
    <div></div>

</body>

二：背景图片二倍图

 

<style>
        /* 1. 我们有一个 50 * 50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍: 100*100 */
        /* 2. 我们需要把这个图片缩放一半，也就是 50*50  background-size*/

        div {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background: url(images/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

 

标签：缩放,500px,50px,某条,background,size,背景图片,图片
来源： https://blog.csdn.net/lazylYYY/article/details/119104210