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

最新推荐文章于 2024-02-27 20:42:40 发布

美美| ू•ૅω•́)ᵎᵎᵎ

最新推荐文章于 2024-02-27 20:42:40 发布

阅读量527

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/lazylYYY/article/details/119104210

版权

移动端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一：背景缩放background-size:

③背景图片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>

三：二倍精灵图

①：等比缩小

②测量坐标

③背景图片background-size也要缩小为精灵图原来宽度的一半

美美| ू•ૅω•́)ᵎᵎᵎ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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; ...
复制链接

扫一扫