图片背景

最新推荐文章于 2024-07-24 16:53:23 发布

one or two

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量178

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_41633396/article/details/116884549

版权

注意下面代码中的background-attachment的使用，这个用来设置背景图片是否在其所属的元素内滚动的，要看到效果的话，最好先让该元素能够产生滚轮

注意观察box2中设置background-attachment前后的box2中位置跟随滚轮的变化

<!DOCTYPE html>
<html lang="zh">
    <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>
            /* body{
                height:1800px;
            } */
          .box1{
            width:200px;
            height:300px;
            background-color: #bfa;
            background-image:url("./img/2.jpg");
            background-repeat:no-repeat;
            /* background-position: 400px 400px; */
            /* border:10px red double; */
            background-clip: border-box;
            background-position:0px 0px;
            background-origin: border-box;
            background-size: contain;
            overflow:auto;
          }
          .box2{
              width:200px;
              height:1500px;
              background-color:rgba(255, 192, 203, 0.3);
              background-repeat: no-repeat;
              background-image:url("./img/1.png");
              /* 注意background-position和background-attachment */
              background-attachment:fixed;
          }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">asdfdddddddddddddddddddddddddddd
                <br>
                asdfffffffffffffffffffsafda
            </div>
        </div>
    </body>
</html>

注意box1中的图片的变化，当给box2设background-attachment时前后的变化（通过测试，会发现，当滚动时，对box1中的图片产生不了变化，个人目前觉得产生这个的原因是，需要给box1产生滚轮的效果，也就是让box1的父元素产生滚轮出来，于是，可以考虑给body设置一个高度）

<!DOCTYPE html>
<html lang="zh">
    <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>
            body{
                height:1800px;
            }
          .box1{
            width:200px;
            height:300px;
            background-color: #bfa;
            background-image:url("./img/2.jpg");
            background-repeat:no-repeat;
            /* background-position: 400px 400px; */
            /* border:10px red double; */
            background-clip: border-box;
            background-position:0px 0px;
            background-origin: border-box;
            background-size: contain;
            overflow:auto;
          }
          .box2{
              width:200px;
              height:1500px;
              background-color:rgba(255, 192, 203, 0.3);
              background-repeat: no-repeat;
              background-image:url("./img/1.png");
              /* 注意background-position和background-attachment */
              background-attachment:fixed;
          }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">asdfdddddddddddddddddddddddddddd
                <br>
                asdfffffffffffffffffffsafda
            </div>
        </div>
    </body>
</html>

注意background的简写属性的运用要注意的两点

在这里插入图片描述

利用a标签实现不同的状态来切换不同的图片背景

把一个图片放到一个元素里面作为背景，那么这个元素必须要是块元素,因此，下面的练习中，必须要将行内元素a转化为块元素

<!DOCTYPE html>
<html lang="zh">
    <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>
            a:link{
                display:block;
                width:93px;
                height:29px;
                background-image:url("./img/按钮/link.png");
            }
            a:hover{
                background-image:url("./img/按钮/hover.png");
            }
            a:active{
                background-image:url("./img/按钮/active.png");
            }
        </style>
    </head>
    <body>
        <a href="javascript:;"></a>
    </body>
</html>

另外，需要注意的一点是，当在link的时候，把a转化为块元素后，在后面的hover和active的时候，就不需要把充分把a标签转化为块元素了

特别需要注意的是，在浏览器第一次打开网页的时候，会出现闪的情况，为什么会出现闪的情况？

在这里插入图片描述

现在，对于静态网页而言，如果网页中有一张图片（整个网页中只有这一张图片是外部资源），那么浏览器总共会加载两次数据，第一次加载非图片的数据，第二次按需加载图片

解决加载图片时，由于按需加载时，产生的闪烁的问题，可以使用css.sprite(精灵)，也称为“雪碧图”来解决这个问题

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
    <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>
            a:link{
                display:block;
                width:93px;
                height:29px;
                background-image:url("./img/按钮/btn.png");
            }
            a:hover{
                background-position:-93px 0px;
            }
            a:active{
                background-position:-186px 0px;
            }
        </style>
    </head>
    <body>
        <a href="javascript:;"></a>
    </body>
</html>

注意，上面中，虽然将多个图片合并为一个图片，但是放置该背景图片的元素的大小，其实还是取的是合并之前的一个图片的大小，这个实际上利用的就是当背景图片的大小，小于放置该背景图片元素的大小的时候，背景图片显示多少的问题，然后，结合background-position就可以实现雪碧图，解决问题。

<!DOCTYPE html>
<html lang="zh">
    <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>
            a:link{
                display:block;
                width:93px;
                height:29px;
                background-image:url("./img/按钮/btn.png");
            }
            a:hover{
                background-position:-93px 0px;
            }
            a:active{
                background-position:-186px 0px;
            }
            .box1{
                width:128px;
                height:46px;
                background-image:url("./img/amazon-sprite_.png");
                background-position:0px 0px;
            }
            .box2{
                width:42px;
                height:30px;
                background-image: url("./img/amazon-sprite_.png");
                background-position: -58px -338px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <a href="javascript:;"></a>
    </body>
</html>

在这里插入图片描述

注意上面中的将三张图片合并为一张图片后，图片总的大小还变小了

另外，雪碧图只使用于background-image来引入图片，而不适用于imge来引入图片

one or two

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片背景

注意下面代码中的background-attachment的使用，这个用来设置背景图片是否在其所属的元素内滚动的，要看到效果的话，最好先让该元素能够产生滚轮注意观察box2中设置background-attachment前后的box2中位置跟随滚轮的变化<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv=
复制链接

扫一扫