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

首先需要了解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. LOJ 546: 「LibreOJ β Round #7」网格图

    题目传送门:LOJ #546. 题意简述: 题目说的很清楚了. 题解: 将不包含起点或障碍物的连续的行或列缩成一行或一列,不会影响答案. 处理过后,新的网格图的行数和列数最多为 \(2k + 3\). ...

  2. 接口测试Post和Get区别(面试题)

    1. HTTP接口传递数据最常用的方式: Get方式是从服务器上获取数据:在做数据查询时,建议用Get方式:如:商品信息接口.搜索接口.博客访客接口等. Post方式是向服务器传送数据 :在做数据添加 ...

  3. Mybatis-Plus 代码生成器基本使用

    Mybatis-Plus 代码生成器基本使用 参考 https://mp.baomidou.com/guide/generator.html#%E4%BD%BF%E7%94%A8%E6%95%99%E ...

  4. 【oracle】ORA-12638 : 身份证明检索失败

    sqlnet.ora 1.删了 2.#注释了 背后缘由:待写

  5. 0x01 Wechall writeup

    目录 0x01 Wechall writeup Limited Access Training: Crypto - Caesar II Impossible n'est pas français Tr ...

  6. Sentinel: 使用注解限流

    在前面我们对Sentinel做了一个详细的介绍,可以手动的通过Sentinel提供的SphU类来保护资源.这种做法不好的地方在于每个需要限制的地方都得写代码,从 0.1.1 版本开始,Sentinel ...

  7. java8之行为参数化

    今天看到一块switch代码,觉得又臭又长,可以优化一下,只需要将函数名作为入参进行改造,有点类似于策略模式. 以下是使用Java8进行行为参数化的简单案例: User.java import lom ...

  8. 应用层协议:HTTPS

    1. HTTPS定义 Hyper Text Transfer Protocol over Secure Socket Layer,安全的超文本传输协议,网景公式设计了SSL(Secure Socket ...

  9. 509道Java面试题解析:2020年最新Java面试题

    <Java面试全解析>是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了. 我本人是 ...

  10. mongodb 系列 ~ mongo 用户验证系列

    MongoClientURI connectionString = new MongoClientURI("mongodb://root:****@dds-bp114e3f1fc441342 ...