zoukankan      html  css  js  c++  java
  • background属性怎么添加2个或多个背景图

      最近遇到一个需求,下面充值金额按钮是一个背景图,点击之后显示的状态也是一个背景图,如下图

            

       按照惯用的套路,新增一个class,点击后的状态直接写在里面即可

      

      然而点击后,虽然状态背景成功显示出来,但按钮背景却消失了

      

       此时,我突然想起background可以添加2个或多个背景,于是修改代码后如下,

      

      本以为大功告成,结果点击后的状态背景都无法显示出来,我开始方了!

      思前想后,突然灵光一闪,难道是这2个背景图的顺序应该颠倒吗?(上面我是把按钮背景放前面,状态背景放后面)

        然后抱着试一试的心态把背景图顺序颠倒之后发现,点击后状态背景和按钮背景都能够正常显示出来

      

      多背景实例,替换图片路径即可

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>多背景实例</title>
            <style>
                .bg {
                    width: 600px;
                    height: 500px;
                    border: 1px solid;
                    background-image: url("img/1.jpg"), url("img/2.jpg"), url("img/3.jpg"), url("img/4.gif"), url("img/5.jpg");
                    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
                    background-position: top left, top right, bottom left, bottom right, center center;
                }
            </style>
        </head>
    
        <body>
            <div class="bg"></div>
        </body>
    </html>
  • 相关阅读:
    突出展示案例
    下拉菜单案例
    推送人群的选择【技术篇】
    Couchbase 中的分布式储存
    开始了大概三四天的Rails学习之路
    分层架构与公司组织
    极光推送助推视频App,打造最活跃手机新媒体平台
    极光推送CTO黄鑫:技术人员要建立自己的知识图谱
    Android SDK教程
    Android消息推送 SDK 集成指南
  • 原文地址:https://www.cnblogs.com/tu-0718/p/11584956.html
Copyright © 2011-2022 走看看