【前端学习之HTML&CSS】-- CSS第十篇 – 更多的样式
本文具体内容参考了B站渡一教育的课程,原课程链接如下:
渡一教育课程
前言
html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言,在学习过程中,我们首先从html出发,在html的学习过程中深入了解css,在步入学期末尾阶段再进行js的学习。
在CSS的学习过程中,我们已经学习过了很多的知识,主要的样式内容我们都已掌握,这篇博客我们将讲述一下一些也十分常用,但是较为简单无需更多解释的样式,稍稍总结一下。
1. 透明度
(1) opacity:设置整个元素的透明度,内容、边框、背景等都包括;
- 取值:0 - 1;
**整个盒子内的所有内容全部都设置了透明度**
(2) rgba: 在颜色位置设置alpha通道
- 用法:rgba(red, green, blue, alpha)
div{
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, .5);
/* 令背景不覆盖边框 */
background-clip: padding-box;
left: 100px;
top: 100px;
/* opacity: 0.5; */
border: 10px solid rgba(0, 0, 0, .5);
}
2. 鼠标
- 做法:使用cursor设置:
- auto: 浏览器自动选择;
- pointer: 手型光标;
- e-resize: 调整尺寸;
- help: 帮助;
修改cursor为图片,常用.ico/.cur后缀的图片:cursor: url("路径"), auto;
3. 盒子隐藏
原场景:
(1) display: none, 不生成盒子,可能会影响其他盒子的排列效果;
(2) visibility: hidden, 生成盒子,只是从视觉上移除盒子,盒子仍然存在;
4. 背景图
与img元素的区别
img元素是属于HTML的概念,背景图属于CSS的概念,使用方法如下:
(1) 图片属于网页内容时:必须使用img元素;
(2) 图片仅用于美化页面时:必须使用背景图;
涉及的CSS属性
(1) background-imgae: 插入背景图
div{
width: 1000px;
height: 500px;
border: 2px solid;
background-image: url("./as.jpg");
}
默认情况下,背景图在横坐标和纵坐标中不断重复
body{
background-image: url("./be.jpg");
}
(2) background-repeat: 用来设置重复的形式
body{
background-image: url("./be.jpg");
/* 只在y方向重复 */
background-repeat: repeat-y;
}
(3) background-size: 背景图的大小及扩展
预设值
- contain: 保证比例完整的放入;
- cover:撑满区域,保证比例,故可能遮挡一部分;
百分比
100% 100% : 横向撑满,纵向也撑满,可以忽略一个数值,则代表对应方向自动缩放;
(4) background-position: 设置背景图的位置
- center : 横向纵向居中;
- center bottom: 横向居中,纵向靠下;
【通过top、bottom、left、right设置距离,可以书写数值/百分比】
- 应用:取出雪碧图/精灵图(spirit)中的小图标;
做法:将对应图标通过position放置在图片左上角,通过size设置图片大小截取对应图标
div{
width: 300px;
height: 300px;
border: 2px solid;
background-image: url("imgs/icon.png");
background-repeat: no-repeat;
background-position: -47px -38px;
background-size: 30px 30px;
}
(5) background-attachment:控制背景图是否固定
-
用法:
background-attachment: fixed;
背景图是否固定,主要与视口有关,即背景图是否跟随视口变化;
(6) 背景图和背景颜色混用
- 用法:直接书写背景图和背景颜色就行,在没有背景图的地方就会显示背景颜色;
(7) 简写书写background:
/* 先写position在写size */
background: url("imgs/icon.png") no-repeat 50% 50%/100% fixed #000; color: #fff;
总结
本文博客结束后,关于CSS样式的基础部分我们就学习完毕了,关于背景图的练习主要是聚焦于四个边距的实际调整,可以根据浏览器的检查功能实时试凑,故我们不过多介绍,在学习过基本的CSS样式后,我们将继续回归HTML的学习,敬请期待