CSS属性之其他的样式

其他的样式

透明度

1. opacity, 它设置的是整个元素的透明度, 取值位0~1.
   0为完全透明,看不见. 1为完全不透明
   

2. 在颜色位置设置alhpa通道(rgba, 第四个参数为颜色透明度)
   color:rgba(0,0,0,.5)

鼠标样式

使用cursor设置
比如 cursor:pointer , 详情属性请看这里

盒子隐藏

1. display:none, 不生成盒子, 但是可能改变盒子排版
2. visibility: hidden, 生成盒子, 只是从视觉上移除了盒子, 相对于透明度为0. 但是盒子仍然占据空间

背景图

1. 背景裁切

background-clip: content-box; 背景填充内容区

2. 背景图固定

background-attachment: fixed

3. 背景颜色渐变

background:linear-gradient(red,yellow,black,blue)(线性)
background:radial-gradient(red,yellow,black,blue) (镜像)

垂直渐变

加上90deg 变成水平渐变，控制角度
还可以加 to left , to top right

background:linear-gradient(90deg,red,yellow,black,blue)

标志位

background:linear-gradient(red 50%,yellow,black,blue)

中间点

background:linear-gradient(90deg, red,30%,yellow)

重复渐变

background:repeating-linear-gradie(90deg,blue,red 25px)
25px 为渐变宽度

背景图和img的区别

img属于HTML的概念, 而背景图属于CSS的概念

1. 当图片属于网页内容时, 必须使用img元素
2. 当图片仅用于美化页面时, 必须使用背景图

涉及的CSS属性

1. background-image, 通过url指定背景图
2. background-repeat

background-repeat: no-repeat  不重复
background-repeat: repeat-x  x方向重复
background-repeat: repeat-y  y方向重复

默认情况下, 背景图会在横坐标和纵坐标中进行重复

3. background-size
   预设值: contain,cover; 也可以设置,数值或百分比

background-size:cover  把内容撑满且保证比例不变
background-size: 100% 100px  前一个参数表示宽，后一个表示高

4. background-position
   设置背景值的位置
   预设值: left, bottom, top, right, center
   数值或百分比

background-position: center;  表示横向和纵向居中
background-position: center top;  表示横向居中，纵向靠上
background-position: left bottom;   表示横向靠左，纵向靠下
background-position: 10px 0px;  表示离左边10px，离上边0px

5. box-shadow
   设置盒子阴影

box-shadow: 10px 20px 5px balck;
第一个参数为x方向上的位置, 第二个参数为y方向上的位置, 第三个
参数为模糊度, 第四个参数为阴影颜色

6. 背景图和背景颜色混用
   当背景图没有填充的地方背景颜色就会填充

7. 速写属性 background

background: url("./") no-repeat 50% 50% / 100% fixed #000

/前数值设置的时位置, / 后数值设置的时大小