background属性怎么添加2个或多个背景图
时间:2019-09-25
本文章向大家介绍background属性怎么添加2个或多个背景图,主要包括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>
原文地址:https://www.cnblogs.com/tu-0718/p/11584956.html
- js的动态加载、缓存、更新以及复用(一)使用范围:遇到的问题:目标:页面结构:正文
- js的动态加载、缓存、更新以及复用(二)恼人的命名冲突
- 以【猫叫、老鼠跑、主人醒】为例子,使用 javascript 来实现 观察者模式 (有在线演示)
- Debian/Ubuntu-shell脚本来管理iptables安全策略
- Pegasus间谍套件内部原理及流程剖析
- 用node.js实现ORM的一种思路
- iOS“远程越狱”间谍软件Pegasus技术分析
- 学习HTML5之表单
- 基于jQuery的ajax对WebApi和OData的封装我们还是先来看看要求在看看目标:思路封装方式
- js的动态加载、缓存、更新以及复用(四)
- ajax的再次封装!(改进版) —— new与不 new 有啥区别?
- ajax的再次封装!
- 【自然框架】js版的QuickPager分页控件 V2.0
- 你的SQL语句放在了哪里?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOS7.5从零安装Python3.6.6的教程详解
- 实现一台或者多台Linux实例解绑SSH密钥对
- centos7切换启动内核与切换启动模式的讲解
- Ubuntu下Sublime Text无法输入中文最简单的解决方案
- 详解linux系统输入输出管理和vim的常用功能
- 查看远程 Linux 系统中某个端口是否开启的三种方法
- Linux使用iptables限制多个IP访问你的服务器
- 在 Linux 中不使用 CD 命令进入目录/文件夹的方法
- 探索Linux内核:Kconfig的秘密
- Linux中使用命令more,less,cat查看文件内容
- SSH的ssh-keygen命令基本用法详解
- 图文详解Ubuntu搭建Ftp服务器的方法(包成功)
- Linux中chown与chmod两个命令的区别详解
- 解决navicat连接不上linux服务器上的mysql问题
- 增强Linux和Unix服务器安全性的方法详解