CSS(十三)——样式补充
文章目录
透明度
透明度的设置方式一共有两种,具体如下:
- opacity:设置的是整个元素的透明度,取值范围: 0~1;
/*设置为半透明*/
opacity:.5;
-
alpha通道:
rgba(红,绿,蓝,alpha)——alpha取值范围在0~1之间,0为透明,1位不透明。
hex:#红绿蓝 透明
鼠标
鼠标的样式其实有很多,使用方式如下:
cursor:pointer;
/*表示鼠标在这个元素的空间内显示的是一只小手*/
cursor可以设置很多种样式,其中也包括图片,需要注意的是,想设置成一个图片的时候,图片的格式为ico,表示一个图标
/*auto表示如果浏览器不支持我们修改的光标图片,则自动选择浏览器默认的样式*/
cursor:url("图片路径"),auto;
盒子的隐藏
用来页面中的动态效果,类似于二级菜单,轮播图或者弹出。具体方式如下:
- display:none;
- visibility:hidden; /表示子啊视觉上隐藏,实际上还是存在,即依旧占用空间/
背景图
背景图中相对复杂,笔记最后的总结也会详细说明
img元素属于HTML的概念;
background属于CSS的概念。
【注】:当图片属于网页内容时,必须使用img;
当图片属于网页美化时,必须是用background。
注意语义化的相关概念。
- 广告一般使用img来实现,因为广告严格来说属于页面的一部分。
- 需要完成页面显示的基本元素时使用img,如果需要在现有功能的基础上做一些美化应该使用background。
背景图的使用
1.background-image
background-image: url(./imgs/1.jpg);
背景图在默认情况下,如果没有铺满元素属性设定的空间则会不断重复
/*表示在横向和纵向不重复*/
background-repeat:no-repeat;
/*表示只在横向重复*/
background-repeat:repeat-x;
/*表示只在纵向重复*/
background-repeat:repeat-y;
上述方法可以使用单体图片想贴壁纸一样全屏铺满。
2. background-size
表示设置背景图片的尺寸。
/*保证图片撑满区域,且图片比例不变,这样会使图片无法完全显示*/
background-size:cover;
/*保证图片完整显示*/
background-size:contain;
/*表示横向盛满,纵向自动配置*/
background-size:100%;
/*表示横向、纵向盛满*/
background-size:100% 100%;
/*同样可以使用数字来设置*/
3.background-position
表示图片的位置
/*可以使用预设值设置位置:left、bottom、right、top、center*/
background-position:横向,纵向;
/*可以使用树脂或百分比*/
雪碧图:很重要的知识点
从一张图中取出需要的部分,具体使用到背景图片的位置以及宽高来获取。
4.background-attachment
通常用来控制背景图是否固定。
/*表示背景图与视口一致*/
background-attachment: fixed;
一般背景图是在body中设置,如果使用定位position:fixed来设置,则会使body元素不能滚动
5.background简写属性
background:url("") no-repeat 50% 50%(位置)/100%(尺寸)
【注】:需要注意的是必须先写位置,再写尺寸
总结
- 盒子隐藏中的两种办法:一、使用display:none,表示不给盒子分配空间,即在页面显示和空间上都不存在;二、使用visibility:hidden,表示页面中依旧存在该空间,只是在显示上不存在。
- 背景图中,如果图片表示的是页面中必备的元素,则使用img表示;如果图片是在页面已经存在的元素的基础之上进行美化(即,没有图片也不影响功能,则使用背景图来实现)。
- 背景图如果尺寸比设定的元素空间小,则会重复出现,直到填满空间。
- 背景图中的核心用法,雪碧图,没记住的话看上面。
- 背景图可以使用background-attachment来定位,具体用法和定位一致。