CSS（十三）——样式补充

CSS（十三）——样式补充

透明度

透明度的设置方式一共有两种，具体如下：

1. opacity：设置的是整个元素的透明度，取值范围： 0~1；

/*设置为半透明*/
opacity:.5;

2. alpha通道：

   rgba（红，绿，蓝，alpha）——alpha取值范围在0~1之间，0为透明，1位不透明。

   hex：#红绿蓝 透明

鼠标

鼠标的样式其实有很多，使用方式如下：

cursor:pointer;
/*表示鼠标在这个元素的空间内显示的是一只小手*/

cursor可以设置很多种样式，其中也包括图片，需要注意的是，想设置成一个图片的时候，图片的格式为ico，表示一个图标

/*auto表示如果浏览器不支持我们修改的光标图片，则自动选择浏览器默认的样式*/
cursor:url("图片路径"),auto;

盒子的隐藏

用来页面中的动态效果，类似于二级菜单，轮播图或者弹出。具体方式如下：

1. display:none;
2. 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来定位，具体用法和定位一致。