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

　　　　    

　　按照惯用的套路，新增一个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>

background属性怎么添加2个或多个背景图的更多相关文章

  1. css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  2. css中设置background属性

    属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: backgrou ...

  3. background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

    1. background (background-color, background-image)  背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width ...

  4. background 设置文本框背景图

    background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...

  5. img标签和 background 属性的使用分析

    在网页布局中引入图片,最常用的两个就是 img 标签和 background 属性了.但何时使用 img 标签,何时使用 backround 背景图像呢? <img> 标签定义 HTML ...

  6. 从零开始学 Web 之 CSS3（三）渐变，background属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  8. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  9. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

随机推荐

  1. 全网趣味网站分享：今日热榜/Pixiv高级搜索/win10激活工具/songtaste复活/sharesome汤不热替代者

    1.回形针手册 由科普类视频节目“回形针PaperClip”近期提出的一个实用百科工具计划,计划名称是回形针手册. 包含了当下科技,农业等等各行各业的各种相关信息,计划刚刚开始! 关于回形针手册的详细 ...

  2. Python【day 15】基本数据类型-int str bool list

    '''''' ''' 1 python的定义 是一门弱类型的解释性的高级编程语言 这里的高级是相对低级(例如:汇编语言等) 高级编程语言和低级编程语言的区别 1.前者更接近于人的理解--字母组成的语法 ...

  3. Java之线程与进程

    一.线程与进程 线程:一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务.多线程是多任务的一种特别形式,但多线程使用了更小的资源开销. 进程:一个进程包括 ...

  4. 【面试突击】-RabbitMQ常见面试题（一）

    rabbit面试题1.什么是rabbitmq采用AMQP高级消息队列协议的一种消息队列技术,最大的特点就是消费并不需要确保提供方存在,实现了服务之间的高度解耦 2.为什么要使用rabbitmq1.在分 ...

  5. 微信小程序和支付宝小程序富文本使用

    微信小程序使用的是 1. wxml 页面元素的最简单使用 <rich-text nodes="{{这是你的数据}}"></rich-text>   2. j ...

  6. SAP MM 有了采购订单历史的PO行项目里的采购附加费不允许再改了？

    SAP MM 有了采购订单历史的PO行项目里的采购附加费不允许再改了? 正确答案是: 不允许,这是SAP标准逻辑. 那么问题来了!今日收到业务人员报说采购订单4300013979,完成了收货和IV, ...

  7. SAP MM MB5L事务代码'仅总计'选项初探

    SAP MM MB5L事务代码'仅总计'选项初探 MB5L,如下查询条件, 报表结果里显示有差异, 而如下查询条件, 原因在于当勾选了'仅总计'选项以后,系统不考虑MM以外的影响库存金额的事务,而只是 ...

  8. 【LeetCode】198. 打家劫舍

    打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给定 ...

  9. 9.python3实用编程技巧进阶（四）

    4.1.如何读写csv数据 爬取豆瓣top250书籍 import requests import json import csv from bs4 import BeautifulSoup book ...

  10. [Go] 并发imap收信

    并发数太大会直接死,这里有时候需要多试几次 package main import ( "flag" "fmt" "io/ioutil" & ...