更多的样式

更多的样式

透明度

opacity，设置整个元素的透明度，取值为0 ~ 1在颜色位置设置alpha通道（rgba），取值为0 ~ 1

鼠标

使用cursor设置，详见mdn 可以用.ico/.cur文件设置鼠标为一个图片

cursor:url("图片路径"),auto;

盒子隐藏

display:none,不生成盒子visibility:hidden,生成盒子，只是从视觉上移除盒子，盒子依然占据空间。

背景图

与img元素的区别

img元素是属于html概念

背景图属于CSS概念

当图片属于网页内容时，必须使用img元素；当图片仅用于美化页面时，必须使用背景图。 （广告建议使用img）

涉及的CSS属性

background-image

写法：

background-image:url("图片路径")； background-repeat

默认情况下，背景图会在横坐标和纵坐标之间重复

四个属性：

repeat（默认）：横向纵向都重复 repeat-x:横向重复 repeat-y:纵向重复 none:不重复

background-size

预设值：

cover：保证图片撑满区域，保证比例不变 contain：保证图片完整显示，比例不变

数值或百分比：

百分比：图片宽高比例 数值：图片宽高大小

background-position

设置背景图的位置。

预设值：center/left/right/top/bottom

background-position:left center

↑横向靠左，纵向居中

数值或百分比：

数值：相对位置

background-position:10px -15px

↑距离盒子左边10像素，上面-15像素

雪碧图（精灵图）（sprite）

工程中通常会将页面的所有图标都汇聚在一张图片上，这张图片就叫做雪碧图。

从雪碧图中取出需要的图标，先设置雪碧图为background-image，设置background-repeat为no-repeat， 之后调整background-position为合适位置，最后设置background-size即可。

background-attachment

预设值：fixed 设置背景图为相对于视口的，类似于固定定位。

背景图和背景颜色混用

速写（简写）属性 background

background: url(图片路径) no-repeat 50% 50%/100% fixed #008c8c;

注：使用background速写属性时，“/”前面的数值是位置，“/”后面的是尺寸 。