CSS——背景的相关属性以及雪碧图的使用方法

文章目录

• 一、背景的相关属性？
• 二、雪碧图
• 三、渐变

一、背景的相关属性

opacity 0完全透明 1完全不透明  .5半透明

 opacity 和  rgba的区别

1.opacity是属性，rgba是样式的值

2.rgba样式值一般必须根子特定的属性后，例如背景色，颜色等，opacity可以任意设置

3.继承性的区别——

opacity是属性，有样式的继承，子元素可继承它的样式，但rgba只是一个样式值，无继承性。

---

有关background的相关属性

background-color      设置背景颜色

background-image   url（"图片的路径"）   设置背景图片

可以同时设置图片的背景颜色和背景图片，这时背景颜色会自动成为图片的背景色，图片大于背景元素，将会有一部分无法完全显示，图片小于背景元素，则背景图片会自动在元素中平铺铺满

background-repeat   设置背景的重复方式

可选值   repeat  默认值，背景会沿着x轴，y轴双方向重复铺满

             repeat-x   沿着x轴方向重复平铺 

             repeat-y    沿着y轴方向重复平铺

              no-repeat   背景图片不重复

background-position   设置图片的位置 通过 top, left, right, bottom,center  几个方向表示图片的位置，使用方位时，同时要指定两个值，如果只写第一个，第二个就是 center  例如：使图片处于左上角   background-position: top left;通过偏移量 来指定背景图片的位置     水平方向的偏移量，垂直方向的偏移量background-position:   100px 100px;

background-clip   设置背景的范围

可选值

    border-box  背景会出现在边框的下边

    padding-box 默认值， 背景不会出现在边框，只出现内容区和内边距

    content-box   背景只会出现在内容区

background-orign   背景图片的偏移量计算的原点　

      padding-box  默认值，background-position从内边距处开始计算

      content-box  背景图片偏移量从内容区处计算

      border-box    北京图片的变量从边框处开始计算

background-size 设置背景图片的大小

第一个值表示宽度，第二值表示高度

如果只写一个，则第二个值默认是   auto

cover 图片的比例不变，将元素铺满，呈现的图片可能会不完整

contain  图片的比例不变，将图片在元素在元素中完整显示

background-attachment   背景图片是否跟随元素移动

可选值

    scroll   默认值，背景图片会跟随元素移动

     fixed   背景会固定在页面中，不会随元素移动

背景的简写属性

   background 所有背景的样式都可以通过该样式来设置，样式没有顺序要求，没有哪个属性是必须要写的，

注意：  background-size必须写在background-position的后面，并且使用  /  隔开

background-position/background-size

background-orgin    在  background-clip    前面  因为它俩的属性值相同，为了区分，做出的规定

---

二、雪碧图（css-sprite）

      解决图片闪烁的问题，  可以将多个小图统一保存到大图片中，然后通过调整 bakground-position 来显示图片， 这样图片会同时加载到网页中，就可以 有效地避免出现闪烁的问题  这种技术被称为  css-sprite,这种图片叫做雪碧图，降低请求的次数，加快访问速度，提升用户的体验

---

三、渐变

线性渐变  linear-gradient()

渐变是图片，需要通过background-image 来设置，线性渐变，颜色沿着一条直线发生变化 

background-image:linear-gradient(red,yellow);  红色向黄色进行渐变（从上向下） 

可以同时指定多种颜色

background-image:linear-gradient(to right,red,yellow); 从左向右渐变

to left ,to right, to bottom,to top,xxxdeg  (deg表示度数) 1turn(表示一圈)

background-image:linear-gradient(red 50px,yellow 150px); 可以设置渐变的范围

background-image:repeating-linear-gradient(red 50px,yellow 150px);

放射性渐变 （radial-gradient）

radial-gradient(大小  at 位置，颜色 位置，颜色 位置，颜色 位置 )

大小：  circle 圆形  ellipse 椭圆 ……

位置： top right left bottom center  也可以通过像素值指定位置

---