【前端学习之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的学习，敬请期待