透明度
opacity
设置整个元素的透明,取值0到1,越小越透明
下面是opacity为0.3
通过rgba设置alpha大小
鼠标样式
可以更换鼠标图标:
url里面填写地址(可以是文件,也可以是外面的),auto意思是如果引用的图片失效了,就用默认的,你也可以改成pointer,那就是url图片失效,最终以pointer形式呈现
请一定要注意了,url引用的图片必须是ico格式的,自己改个后缀的是不行的!!!!!!!!!
盒子隐藏
1.display:none;不生成盒子,影响后面盒子的排列
2.visibility:hidden;生成盒子,只是视觉上不见了,不影响后面盒子的排列
背景图
img元素是属于html的概念
背景图属于css的概念
1.当图片属于网页内容时,必须使用img元素(用于表现内容)
2.当图片仅用于美化页面时,必须使用背景图(按钮的背景图,用于修饰)
涉及到的css属性:前提是有背景图
background-image: url(地址);
如果当前元素宽高大,那么那张图片就不会断重复
如果不想重复,你可以这样设置
下面表示只重复x方向,y方向不重复
background-size
控制背景图的大小
background-size详解
background-position
设置背景图位置
第一个是水平方向上,第二个是垂直方向上
比如background-position:center top;
就是水平居中
垂直方向紧贴上面
也可以是数值
比如background-position:320px -120px;
背景图距离包含块左边320px,离上边-120px
应用:雪碧图(精灵图)(spirit)
通常我们会把多个照片放在一张图片中,加快浏览器渲染,到时候要用的就使用background-position慢慢调节位置,
我们最终选择出信封
background-attachment
通常用它控制背景图是否固定
比如设为fixed,就是相对可视窗口一直不变,一直固定在那个位置,无论我们怎么滚动鼠标
背景图和背景颜色混合使用
如上面那张图,下面还有一点没填充完,这时候背景颜色也还是有效的
速写(简写)background
上面的代码可以压缩成这样,注意,数值先写background-position的两个数值,然后/加上background-size