cssZ-index,背景图片，权重
Z-index就是z轴的方向。
<!DOCTYPE html>
<!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->
<!--注释：元素可拥有负的 z-index 属性值。-->
<!--注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！-->
<!--position为relative或absolute或fixed才起作用，static不起作用-->
<!--http://www.w3school.com.cn/cssref/pr_pos_z-index.asp-->
<!--http://www.fx114.net/qa-6-305787.aspx-->
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{padding: 0;margin: 0;}.mydiv1{position: fixed;width: 100px;height: 100px;background-color: #00A000;top: 0px;lef: 0px;z-index: 1;}.mydiv2{position: fixed;width: 100px;height: 100px;background-color: #219161;top: 50px;left: 50px;z-index: 2;}</style>
</head>
<body>
<div class="mydiv1">
</div>
<div class="mydiv2">
</div></body>
</html>
<!DOCTYPE html>
<!--背景尺寸背景居中-->
<!--参考http://www.w3school.com.cn/cssref/pr_background-size.asp-->
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>html,body{width: 100%;height: 100%;}*{margin: 0;padding: 0;}/*最外层的div要设置宽高100% 100%，则要给html,body宽高都设置成100%*/
.mydiv1{width: 100%;height: 100%;/*设置背景图片，x y 轴都不重复*/
background: url("images/img01.jpg")no-repeat;/*设置背景尺寸*/
background-size: 100% 100%;/*背景居中*/
background-position: center;}</style>
</head>
<body><div class="mydiv1"></div>
</body>
</html>
<!DOCTYPE html>
<!--权重-->
<!--第一等：style，代表内联样式，如: style=””，权值为1000。-->
<!--第二等：ip，代表ID选择器，如：#content，权值为100。-->
<!--第三等：class，代表类，伪类和属性选择器，如.content，权值为10。-->
<!--第四等：元素，代表类型选择器和伪元素选择器，如div p，权值为1。-->
<!--权值越大，优先级越高,优先执行style,在执行ip,在执行class,在执行元素-->
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>#mydivip{width: 100px;height: 100px;background-color: #AA22FF;}.mydivclass{width: 100px;height: 100px;background-color: #00A000;}div{width: 100px;height: 100px;background-color: #005599;}</style>
</head>
<body><div id="mydivip" class="mydivclass" style=" width: 100px;height: 100px;background-color: red;"><p id="red">这个段落是红色。</p><p>人的生命是有限的，可是为人民服务是无限</p></div>
</body>
</html>
cssZ-index,背景图片，权重相关推荐
- html怎么用小小的图片铺满作为背景,多种背景图片随机切换的应用
在皮肤『QQ Style』中我使用了随机背景切换功能,这个随机背景切换是一个独立的功能,上面使用的只是其中一小部分应用.下面我将演示背景随机切换的更多应用,然后大家就可以有更多的拓展. 第一:背景图片 ...
- Android 天气APP（十三）仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
上一篇:Android 天气APP(十二)空气质量.UI优化调整 天气预报详情,逐小时预报详情 新版------------------- 一.适配器点击监听 二.页面实现 三.天气预报详情弹窗 四. ...
- ，改变LI背景颜色与背景图片
1,背景颜色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
- java窗体添加背景图片_Java项目实战之实战之天天酷跑（四）：游戏主界面
接上文,本文将实现游戏主界面,功能如下: 移动的背景图片.动态的玩家.玩家的移动功能.五种障碍物持续出现.玩家和障碍物的碰撞.暂停.继续功能. 首先,看一下整体效果: 动图实在太大,几秒钟的 Gif ...
- 用js监控分辨率调整背景图片宽度_如何使用CSS Paint API动态创建与分辨率无关的可变背景
现代Web应用对图像的需求量很大,它们占据网络下载的大部分字节.通过优化它们,你可以更好地利用它们的性能.如果你碰巧使用几何图形作为背景图像,有一个替代方案:你可以使用CSS Paint API以编程 ...
- css --- [学习笔记]背景图片小结 css三大特性
源代码 参考 1. 行高(line-height) 目标 理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居 应用 使用行高实现单行文字垂直居中 能会测量行高 2. CS ...
- 巧妙的有css合并图片解决tab切换的背景图片
巧妙的有css合并图片解决tab切换的背景图片 有时候做tab切换的时候 会碰到下面的这种情况 我截个图过来看看 tab切换 打开页面时候 茶庄介绍 及鼠标移上去时候 是上面这样的效果 当鼠标移下 ...
- Android之app引导页(背景图片切换加各个页面动画效果)
转载:http://blog.csdn.net/lowprofile_coding/article/details/48037095 先看效果图: 1.显示三个页面的Activity 用view p ...
最新文章
- python编程入门经典教程-2020年5个经典python编程入门视频教程推荐学习
- java工资高还是php_java和php哪个工资高
- oracle sql语句 只读,Oracle_SQL语句
- markdown常用字体
- 开始新的学习之旅--PHP开发学习--基础部分笔记
- Java 创建线程的三种方式总结
- 二级下拉菜单缓慢渐变
- 企业微信授权登录实例代码（仅仅获取过程）
- 直播讲座：时序数据库 Apache IoTDB 的核心技术与应用
- 天津大学仁爱学院计算机科学与技术学费,天津大学仁爱学院计算机科学与技术专业2016年在天津理科高考录取最低分数线...
- Java jdk keytool 实现SSL双向认证的方法（客户端与服务器）
- Linux环境部署：开启电脑虚拟化
- Python+Appium实现京东双十一自动领金币
- 今年晋升本没抱希望，已有绩效更好的同事将参加晋升，leader却临时让我也去答辩，怀疑自己被拉去陪跑，该怎么办？...
- 精诚CRMPM系统应该要有哪些销售功能
- 新神奇传说补丁_如何在神奇宝贝Go中捕捉传说中的神奇宝贝
- 双网卡电脑的Internet连接共享
- vue实现3D饼状图
- 基于ARM处理器的无线SoC实现
- python知识：如何自定义装饰器