需求:使用多张图片作为页面的背景图;

首先需要了解background的属性以及细节知识:https://www.cnblogs.com/chenglj/p/7372996.html

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
如上写法;
可以通过调整图片的顺序显示哪张图片在最上端。

然后,需要了解关于background-position的具体用法:https://www.douban.com/note/510879342/

相对坐标原点进行位置调整,或者使用

left, right, top, bottom, left top, left bottom, right top, right, bottom

分别表示,从左往右,从右往左,从上往下,从下往上,从左上往右下,从……(都懂的,不全写了)

暂时至此。

												

css1.0~3.0背景图使用多张折叠的概念与方法的更多相关文章

  1. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  2. js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

    思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...

  3. WPF Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" 画方格背景图

    此项目源码下载地址:https://github.com/lizhiqiang0204/Tile 方格效果: 前端代码如下: <Window x:Class="WpfApp1.Main ...

  4. MPAndroidChart 3.0——LineChart(折线图)

    显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...

  5. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  6. position:absolute 按钮左右分布:left:0 和 right:0 以及雪碧图

    问题:把两个a标签按钮 垂直居中,并且分别把两个按钮放在水平左右两边顶部1,祖父元素设定:position:relative2,把.arrow 设定上下垂直居中 position:absolute; ...

  7. (转载)Cocos2dx-OpenGL ES2.0教程:纹理贴图(6)

    在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...

  8. 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)

    在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...

  9. 升级_开阔视野之Oracle图形化升级(dbca建库后升级)—10.2.0.1.0升为10.2.0.5.0

    ***********************************************声明*************************************************** ...

随机推荐

  1. lf 前后端分离 (4) 价格策略

    一.价格策略 价格策略就是通过前端发送要购买的课程以及价格策略来找出表关联的字段返回客户端 通过contenttype 属性 找到课程所有的价格策略 for prcie_policy in cours ...

  2. JS高阶---H5之Web Workers多线程

    大纲: 主体: (1)介绍 (2)案例 编程实现斐波那契数列的计算 递归调用实现案例: Web Workers多线程的新标准并没有改变JS单线程的本质,分离出的子线程完全受主线程控制,且不得操作DOM ...

  3. 201871010101-陈来弟《面向对象程序设计(java)》第十六周学习总结

    实验十四  应用程序归档与线程初步 实验时间 2019-12-12 第一部分:基础知识 1. 程序与进程: 进程是指一个具有一定独立功能的程序关于某个数据集合的一次运行活动.电脑中时会有很多单独运行的 ...

  4. shell脚本特殊符号——单引号、双引号、反引号、反斜杠

    1. 单引号 ( '' ) 被单引号用括住的内容,将被视为单一字串. 2. 双引号 ( " " )  被双引号用括住的内容,将被视为单一字串.双引号只要求忽略大多数,具体说,括在双 ...

  5. Zookeeper注册中心搭建-单机版(三)

    Zookeeper是一个分布式协调组件,本质是一个软件. Zookeeper常用的功能有: 发布订阅功能,把 zookeeper 当作注册中心的原因. 分布式/集群管理功能 Zookeeper是Jav ...

  6. Python进阶-XIV 面向对象初步

    1.面向对象的引入 def Person(*args): ''' 定义一个人 :param args: 人的属性 :return: 人的所有属性的字典 ''' info = {} info['name ...

  7. 洛谷 题解 P4198 【楼房重建】

    首先明确问题,对于每栋楼房的斜率K=H/X,问题就是问有多少个楼房的K比前面所有楼房的K都要大. 这题树套树当然可以,但是挺麻烦的,本渣觉得最简单就是分块…… 将N个楼房分成T块,不断维护每个块内楼房 ...

  8. [LeetCode] 58. Length of Last Word 求末尾单词的长度

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  9. [LeetCode] 46. Permutations 全排列

    Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...

  10. 区间DP(超详细!!!)

    一.问题 给定长为n的序列a[i],每次可以将连续一段回文序列消去,消去后左右两边会接到一起,求最少消几次能消完整个序列,n≤500. f[i][j]表示消去区间[i,j]需要的最少次数. 则; 若a ...