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

首先需要了解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. socket_http

    socket_http import socket from urllib.parse import urlparse import time def get_url(url): # 通过socket ...

  2. pycharm 有汉字的地方就有阴影

    1.pycharm  有汉字的地方就有阴影 编码申明 阴影就会消失 # _*_ coding:UTF-8

  3. Socket是什么(一)

    网络编程就是编写程序使两台联网的计算机相互交换数据. 那么,这两台计算机之间用什么传输数据呢?首先需要物理连接.如今大部分计算机都已经连接到互联网,因此不用担心这一点. 在此基础上,只需要考虑如何编写 ...

  4. 多个页面进行爬虫 pycharm

    使用requests , lxml  ,xpath进行爬取并写入了TXT(也可以存入数据库).参考博客:https://blog.csdn.net/yexing_cts/article/details ...

  5. c:forTokens标签循环输出

    对带有相同符合格式内容进行分割输出,例如,varstr="1,2,3,4,5,6"; c:forTokens属性说明表 引用 varStatus,它们描述了迭代的当前状态,如下这些 ...

  6. 求职-DB相关职位常见face题

    数据分析是个通用技能,适合各行各业,比如运营.产品.分析等职位都会要求会数据分析. 一.考察对数据分析岗位的理解与职业规划 数据分析师与数据工程师的区别在哪里? 为什么转行, 为什么没在公司内部转岗? ...

  7. Chrome 禁止 http 自动转化为https

    Chrome 浏览器 地址栏中输入 chrome://net-internals/#hsts 在 Delete domain security policies 中输入项目的域名,并 Delete 删 ...

  8. js将字符串内空格去除的方法

    function noSpace(x){ if(x.match(/\s*/g)){ return x.replace(/\s*/g,""); }else{ return x; } ...

  9. docker--(MAC ubuntu centos)安装

    MacOS 安装 1.homebrew安装(需要mac密码) brew cask install docker 2.手动下载安装 如果需要手动下载,请点击以下链接下载 Stable 或 Edge 版本 ...

  10. CF1175D Array Splitting

    题目链接 题意 给出一个长度为\(n\)的序列\(a\),要求分为恰好\(K\)段.第\(i\)个点的贡献是\(a_i \times f(i)\),\(f(x)\)表示x所属的是第几段. 思路 非常巧 ...