Html 层级 透明度 背景图片
* 如果定位元素的层级是一样，则下边的元素会盖住上边的
* 通过z-index属性可以用来设置元素的层级
* 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
* 层级越高，越优先显示
*
* 对于没有开启定位的元素不能使用z-index
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
* 设置元素的透明背景
* opacity可以用来设置元素背景的透明，
* 它需要一个0-1之间的值
* 0 表示完全透明
* 1 表示完全不透明
* 0.5 表示半透明
opacity属性在IE8及以下的浏览器中不支持
* IE8及以下的浏览器需要使用如下属性代替
* alpha(opacity=透明度)
* 透明度，需要一个0-100之间的值
* 0 表示完全透明
* 100 表示完全不透明
* 50 半透明
*
* 这种方式支持IE6，但是这种效果在IE Tester中无法测试
背景设置图片
* 使用background-image来设置背景图片
* - 语法：background-image:url(相对路径);
*
* - 如果背景图片大于元素，默认会显示图片的左上角
* - 如果背景图片和元素一样大，则会将背景图片全部显示
* - 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
*
* 可以同时为一个元素指定背景颜色和背景图片，
* 这样背景颜色将会作为背景图片的底色
* 一般情况下设置背景图片时都会同时指定一个背景颜色
*/
background-image:url(img/1.png);
* background-repeat用于设置背景图片的重复方式
* 可选值：
* repeat，默认值，背景图片会双方向重复（平铺）
* no-repeat ，背景图片不会重复，有多大就显示多大
* repeat-x， 背景图片沿水平方向重复
* repeat-y，背景图片沿垂直方向重复
*/
background-repeat: repeat;
background-position: center;
/*
* 当背景图片的background-attachment设置为fixed时，
* 背景图片的定位永远相对于浏览器的窗口
*/
background-attachment: fixed;
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
* 这个闪烁会造成一次不佳的用户体验。
* 产生问题的原因：
* 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，
* 但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
* 我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，
* 所以hover.png和active.png并不是立即加载的
* 当hover被触发时，浏览器才去加载hover.png
* 当active被触发时，浏览器才去加载active.png
* 由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
*
* 为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
* 然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
* 优点：
* 1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
* 提高访问效率，提高了用户体验。
* 2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
*
*
.btn:link{
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width: 93px;
height: 29px;
/*设置背景图片*/
background-image: url(img/btn/btn2.png);
/*设置背景图片不重复*/
background-repeat: no-repeat;
}
.btn:hover{
/*
* 当是hover状态时，希望图片可以向左移动
*/
background-position: -93px 0px;
}
.btn:active{
/*
* 当是active状态时，希望图片再向左移动
*/
background-position: -186px 0px;
}
Html 层级 透明度 背景图片相关推荐
- 元素的层级和背景图片
z-index(数值)设置元素层级 设置层级后,父元素层级在高也不会盖住子元素 如果定位元素的层级是一样,则下边的元素会盖住上边的 通过z-index属性可以用来设置元素的层级 可以为z-index指 ...
- web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
- Qt Designer设置背景图片、颜色不影响其它组件小技巧，控件层级设置，组件的继承，styleSheet设置样式。
话不多说,先看效果图,完美的设置背景. 如果正常设置背景的话其它的组件都会产生变化. 这是因为组件的继承. 最开始的面板就是父类,我们新增加的组件就是子类,默认都是继承的. 继承也有继承的好处. 比如 ...
- php背景图片透明度,css如何使用opacity属性给背景图片加透明度（代码）
本篇文章给大家带来的内容是关于css如何使用opacity属性给背景图片加透明度(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS 中无法直接给背景图片加 opacity ...
- 微信小程序实现页面加入背景图片以及调节透明度
在微信小程序中有时候需要在页面加入背景图片以及调节透明度让我们的小程序变得更加美观,以下是代码实现: 1.WXML <view class="bg" ><imag ...
- 关于设置背景图片的透明度（html+css）
2018.3.22 设置背景图片的透明度,而不是颜色这种,是图片显示 这个就跟某些博客能够换背景图片当主题一样的道理,看了好久终于搞清楚了 <body>里面是不能直接设置图片的透明度的 需 ...
- css：css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度 注意: css中无法直接给背景图片加 opacity 属性,可以使用下面的方法来给background-image加上我们想要的透明度opacity. 2. ...
- Qt 设置Widget背景图片并实现透明度的三种方式
一.场景 在平常的开发过程中,我们常常会遇到需要设置Widget窗口背景图片透明度的方式.一般会有三种方式可以进行设置. 二.方式一(使用图形遮罩功能SetMask函数) class BackGrou ...
- CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法
目录 前言 一.多个背景图片 二.渐变颜色 1.线性渐变 2.径向渐变 3.浏览器前缀 4.opacity透明度 写在最后 前言 在前面说了CSS怎样设置背景图片,与设置颜色的几种方式.如果你想查看可 ...
最新文章
- 明文存密码成惯例？Facebook 6 亿用户密码可被 2 万员工直接看
- vue 源码学习(二) 实例初始化和挂载过程
- mysql排他锁和共享锁视频_分享MySQL 中的共享锁和排他锁的用法
- MySQL-数据类型
- 支持向量机SVM（五）SMO算法
- 优雅地用宏实现环形缓冲区
- linux 批量替换文件内容及查找某目录下所有包含某字符串的文件（批量修改文件内容）...
- 大学计算机基础方案一,大学计算机基础案例教学与教学案例策划.doc
- 年轻人开始“反算法”
- 算法手记 之 数据结构(并查集详解)(POJ1703)
- js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密详解总结
- 那些被苏宁奖励的人、重用的人
- 名表依波路borel_依波路手表排名 依波路手表世界排名第几
- 清空了回收站的文件还能找回吗
- Java实现png图片转pdf
- HDU 6148 Valley Numer(数位DP)
- CSDN怎么在文章中生成目录
- P3387 【模板】缩点 洛谷 java题解 连通图+拓扑排序
- 【React】一路走来并持续竞走
- C语言数组中，数组名在中括号中（即 [array]）是什么意思？