css1.0~3.0背景图使用多张折叠的概念与方法
需求:使用多张图片作为页面的背景图;
首先需要了解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背景图使用多张折叠的概念与方法的更多相关文章
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue
思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...
- WPF Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" 画方格背景图
此项目源码下载地址:https://github.com/lizhiqiang0204/Tile 方格效果: 前端代码如下: <Window x:Class="WpfApp1.Main ...
- MPAndroidChart 3.0——LineChart(折线图)
显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...
- 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 ...
- position:absolute 按钮左右分布:left:0 和 right:0 以及雪碧图
问题:把两个a标签按钮 垂直居中,并且分别把两个按钮放在水平左右两边顶部1,祖父元素设定:position:relative2,把.arrow 设定上下垂直居中 position:absolute; ...
- (转载)Cocos2dx-OpenGL ES2.0教程:纹理贴图(6)
在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)
在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...
- 升级_开阔视野之Oracle图形化升级(dbca建库后升级)—10.2.0.1.0升为10.2.0.5.0
***********************************************声明*************************************************** ...
随机推荐
- python之路—从入门到放弃
python基础部分 函数 初识函数 函数进阶 装饰器函数 迭代器和生成器 内置函数和匿名函数 递归函数 常用模块 常用模块 模块和包 面向对象 初识面向对象 面向对象进阶 网络编程 网络编程 并发编 ...
- flink源码学习
传送门: https://www.jianshu.com/c/c9b356caf8a6
- wal2json pg扩展centos7构建
使用wal2json可以将pg 变动输出为json 格式,是一个pg 扩展,支持pg9.4+ 目前看到netflix 的dblog 对于pg 的支持就是基于此插件 以下是关于centos 7的构建说明 ...
- 7.27 NOIP模拟测试9 随 (rand)+单(single)+题(problem)
T1 随 (rand) dp+矩阵优化+原根 看着题解懵了一晚上加一上午,最后还是看了DeepinC的博客才把暴力码出来,正解看得一知半解,循环矩阵也不太明白,先留坑吧.暴力里用二维矩阵快速幂会tle ...
- [LeetCode] 90. Subsets II 子集合之二
Given a collection of integers that might contain duplicates, S, return all possible subsets. Note: ...
- 关于Dev-C++用户所必须知道的知识
开启这几个警告选项,才能拥有GCC编译器的较为全面的报错和警告 另外,目前Dev-C早已停止更新(停滞在版本号5.1,内置的GCC为4.9版本),且使用其检测数组变量也挺麻烦的,实在不推荐使用.
- Salesforce 开发整理(九) 开发中使用的一些小技巧汇总[持续更新]
1.查询一个对象下所有字段 当需要查询一个对象所有字段进行复制或其他操作,可以使用一段拼接的语句来查询 String query = 'select '; for(String fieldApi : ...
- org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'jpaMappingContext之解决办法
错误产生背景:将之前用Eclipse写的Blog项目迁移到Idea上面.Ecilpse项目一直是没有问题的. 错误原因分析:原因是项目依赖中引入的jpa,另外也与Idea比较智能也有关系 解决办法: ...
- Python2.x升级python3.x【升级步骤和错误总结】
网上帖子一大堆,按照那些教程操作,确实可以成功安装.但是安装成功之后呢,pip还是用的python2的pip. 切换到python3的pip之后,发现无法下载模块,还会有很多报错信息.以及" ...
- Oracle性能调优之虚拟索引用法简介
本博客记录一下Oracle虚拟索引的用法,虚拟索引是定义在数据字典中的伪索引,可以说是伪列,没有修改的索引字段的.虚拟索引的目的模拟索引,不会增加存储空间的使用,有了虚拟索引,开发者使用执行计划的时候 ...