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

首先需要了解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. Go语言goroutine调度器初始化(12)

    本文是<Go语言调度器源代码情景分析>系列的第12篇,也是第二章的第2小节. 本章将以下面这个简单的Hello World程序为例,通过跟踪其从启动到退出这一完整的运行流程来分析Go语言调 ...

  2. 201871010107-公海瑜《面向对象程序设计(java)》第十四周学习总结

    201871010107-公海瑜<面向对象程序设计(java)>第十四周学习总结             项目                            内容   这个作业属于 ...

  3. 201871020225-牟星源《面向对象程序设计(java)》第八周学习总结

    201871020225-牟星源<面向对象程序设计(java)>第八周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  4. 卷积,reLu,池化的意义

    1.卷积 提取局部特征 2.Relu 留下相关特征,去掉不相关特征,卷积之后的正值越大,说明与卷积核相关性越强,负值越大,不相关性越大. 3.池化 池化的目的: (1)留下最相关的特征,或者说留下最明 ...

  5. 安卓Jsoup爬虫

    第一步:导入Jsoup包:把你的jar包放在libs下面之后 接着就会显示在你的这个地方: 重要的还是源码(搞了很久 出错很多 终于成功):我做的是输入要查找的关键字百度百科爬取主要定义,按照标签爬取 ...

  6. JAVA基础概念(一)

    一.JAVA标识符 标识符就是用于给 Java 程序中变量.类.方法等命名的符号.如图标黄部分: 使用标识符时,需要遵守几条规则: 1.  标识符可以由字母.数字.下划线(_).美元符($)组成,但不 ...

  7. 关于const关键字

    const:ES6新增关键字,用于声明创建一个值的只读引用. 我们都知道,const一般用来定义常量,在声明的时候需要赋初始值,而且初始值一旦赋值,便不能改变. 但是以上说的是针对于基本类型数据的定义 ...

  8. vue项目中npm安装sass,less,stylus

    用vue-cli脚手架搭建出来的,默认是用标准css的.如果你想用sass,less,stylus就需要自己手动安装一下了. 进入项目文件夹,然后安装(这里以stylus为例)stylus和stylu ...

  9. ORB-SLAM2初步(跟踪模块)

    一.跟踪模块简介 在ORB-SLAM或其他SLAM系统中,跟踪的主要任务是根据相机或视频输入的图像帧实时输出相机位姿.在ORB-SLAM中,跟踪模块的主要任务是实时输出相机位姿和筛选关键帧,完成一个没 ...

  10. Zabbix的基本功能

    zabbix组件: 两核心组件: zabbix-server(监控者) :收集agent发送的数据,写入数据库(mysql.oracal.)中,再通过web展示出来.默认端口为10051. zabbi ...