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
***********************************************声明*************************************************** ...
随机推荐
- 《2019面向对象程序设计(java)课程学习进度条
周次 (阅读/编写)代码行数 发布博客量/评论他人博客数量 课余学习时间(小时) 学习收获最大的程序 阅读或编译让我 第一周 20/5 1/0 4 编译九九乘法表 第二周 100/10 2/0 5 第 ...
- 01-numpy-笔记-empty
import numpy as np >>> a = np.empty([2,3]) >>> a array([[0.00000000e+000, 4.935933 ...
- cookie 用户认证
客户端浏览器上的一个文件 可认为是键值对集合 基于浏览器的功能 可以实现一个用户验证的功能 因为要在页面上显示当前用户的信息 修改 写index urls 运行直接输入index时 会自动进入lo ...
- GIT : IDEA切换到某个tag
背景看一本presto的书,发现版本用的是presto-0.107这个版本.然后我去Apache clone下源码,发现分支只有几个,但是下载页面却有很多不同的版本 然后看Tag发现有很多. 然后我现 ...
- [题解向] 正睿Round435
10.14 Link 唔,这一场打得不好.获得了\(\rm 75pts/300pts\)的得分,但是居然可以获得\(\rm 27/69\)的名次,也不至于不满意--毕竟是真不会233 \(\rm T1 ...
- [LeetCode] 670. Maximum Swap 最大置换
Given a non-negative integer, you could swap two digits at most once to get the maximum valued numbe ...
- vagrant 共享本地目录
安装nfs插件 vagrant plugin install vagrant-winnfsd 打开windows上的vagrantfile 修改如下: Vagrant.configure(" ...
- http与tcp,udp的区别
1.网络协议的概念 (1)在学习网络课程的时候,老师会讲iso七层模型,有应用层 表示层 会话层 传输层 网络层 数据链路层 物理层,其中http就属于应用层,tcp与udp是属于传输层,如图1.1( ...
- Laravel服务容器的绑定与解析
本篇文章给大家带来的内容是关于Laravel服务容器的绑定与解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 老实说,第一次老大让我看laravel框架手册的那天早上,我 ...
- [Python学习笔记-008] 使用双向链表去掉重复的文本行
用Python处理文本文件是极方便的,当文本文件中有较多的重复的行的时候,将那些重复的行数去掉并打印诸如"...<repeats X times>..."有助于更好的浏 ...