26、CSS基础——样式补充

lvh98

已于 2022-08-02 16:23:30 修改

阅读量180

点赞数

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： css html 学习

于 2022-07-07 02:03:14 首次发布

本文链接：https://blog.csdn.net/lvh98/article/details/125650934

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

更多样式

文章目录

更多样式

1. 透明度（opacity/rgba）

1.1 opacity(不透明度)

设置整个元素的透明度，它的取值是0到1，0表示完全透明，1表示完全不透明。

<img src="./main_bg.jpg" alt="" style="width: 50%;">
<div>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, accusamus.
</div>

div{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 100px;
    opacity: 0.5;
}

opacity_exp

不常用，将整个盒子中的区域变成半透明的情况才会用到。

1.2 algha通道

在颜色位置设置algha通道(rgba)，例如rgba(0, 0, 0, 0.5)。

div{
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    background-clip: content-box;
    border: solid 10px rgba(255,255,255,0.3);
    position: absolute;
    top: 100px;
    left: 100px;
}

rgba_exp

比较常用，可以灵活精细的设置某个指定位置颜色的透明度。

2. 鼠标（cursor）

使用cursor样式来设置。例如cursor:point;

除了系统自带的多种鼠标样式，用户也可以自定义鼠标样式，但是图片素材后缀名一般为.ico和.cur，才避免一定的兼容问题

自定义格式：cursor: url("路径"), auto;，后面加auto的目的是防止自定义图标失效或不兼容时，图标样式按照auto设置（浏览器默认样式）

3. 盒子隐藏（display/visibility）

display:none;，不生成盒子，可能会影响到其他盒子的排版；
visibility:hidden;，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。

4. 背景图（background）

4.1 和img元素的区别

img元素属于html的概念，背景图属于css的概念
当图片属于网页内容时，必须使用img元素
当图片仅用于美化页面时，必须使用背景图

4.2 涉及的CSS属性

4.2.1 background-image

background-image: url("路径");将路径中的图片作为背景图。

默认情况下，背景图会在横坐标和纵坐标中进行重复，铺满页面，这种重复是可以控制的，利用下面的CSS属性

4.2.2 background-repeat

background-repeat-x: repeat; 表示在x方向上重复；
background-repeat-y: repeat; 表示在y方向上重复；
background-repeat: repeat;表示在x和y两个方向都重复，相当于background-repeat-x: repeat; background-repeat-y: repeat;
不重复则设置no-repeat

4.2.3 background-size

表示背景图的尺寸

1）预设值：

contain，表示图片完整的显示在区域当中，且比例不变，这样区域内可能留有空白；
cover，表示图片撑满整个区域，且比例不变。

类似于object-fit

2）数值或百分比

background-size: 100%;：横向撑满，纵向按比例缩放，比例不变；

background-size: 100% 100%;：图片撑满，但比例会发生变化；

background-size: 300px 300px;：给图片具体的尺寸，比例会发生变化。

4.2.4 background-position

表示设置背景图的位置

默认靠左，可以进一步设置其预设值调整位置

center：水平垂直居中，后面可以空格加上其他预设值，比如background-position: center top;表示水平居中，垂直靠上。

1）预设值：center、left、right、top、bottom

2）除了预设值，也可以使用数值或百分比，例如background-position: 30px 50px;表示背景图位于区域靠左向右30px，靠上向下50px。

对于位置的百分比：给定背景图像位置的百分比偏移量是相对于容器的，background-position: 25% 75%; 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。

3）雪碧图（精灵图）spirit：将很多很多的小图标放在一张图片上，就称之为雪碧图。

使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。