#前端学习笔记#day9 背景雪碧图

2023-11-29 09:44:40

photoshop下载参考：https://www.cnblogs.com/xuexianqi/p/12493314.html
背景颜色 background-color: #bfc
背景图片 background-image:url('./img/2.png')
- 背景图片需要在后面加url，url后面是图片的路径，最好在括号里加上引号。
- 背景颜色和背景图片可以同时设置
- 如果背景图片小于元素，则背景图片会自动在元素中平铺
- 如果背景图片大于元素，将会一个部分背景无法完全显示
设置背景重复方式 background-repeat: ;
- 可选值：repeat 默认值，背景会沿着x和y轴双方向重复
  - repeat-x 沿着x轴方向重复
  - repeat-y 沿着y轴方向重复
  - no-repeat 背景图片不重复
背景图片位置 background-position: ;
- top left right bottom center来进行调整，可以写top，也可以写 top left ，top center等
- 通过偏移量来指定背景图片的位置
  - 水平方向的偏移量垂直方向的偏移量 background-position:10px 10px ;
设置背景范围 background-clip: ;
- 可选值：border-box 默认值，背景会出现在边框下面
  - padding-box 背景不会出现在边框下面，只出现在内容区和内边距。
  - content-box 背景只会出现在内容区
background-origin背景图片的偏移量计算的原点
- padding-box 默认值，background-position从内边距开始计算
- content-box 背景图片的偏移量从内容区开始计算
background-size 100px 100px ; 第一个值表示宽度第二个值表示高度。
- cover 图片比例不变把元素铺满
- contain 图片比例不变，将图片在元素中完整显示
background-attachment: ;背景图片是否跟随图片移动
- scroll 默认值滚动
- fixed 背景图片会固定在页面中
背景练习按钮
a是超链接，必须有背景才能显示背景图片，设置宽高
a是行内元素，必须转换为块元素才能显示
图片属于网页的外部资源，外部资源都需要浏览器单独发送请求加载
- 浏览器加载外部资源时，按需加载，用则加载，不用则不加载。
- 像我们的练习，会先加载link，而hover和Active会在指定状态下加载。
雪碧图
- 将多个小图片存储到一个大图片里面，然后通过background-position:来调整，可以避免闪烁的问题，我们称这种图为雪碧图。
- 雪碧图使用步骤：
  - 先确定要使用的图标
  - 测量图标的大小
  - 根据测量结果创建一个元素
  - 将雪碧图设置为元素的背景
  - 设置一个偏移量以显示正确的图片
- 雪碧图的特点
  - 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验
线性渐变
- 通过渐变可以设置一些比较复杂的颜色。可以从一个颜色向其他颜色过渡的效果。
- 渐变是图片，需要通过background-image来设置
  - linear-gradient 线性渐变，颜色沿着一条直线发生变化background-image: linear-gradient(red,yellow);红色在开头，黄色在结尾，中间是过渡区域
    - background-image: linear-gradient(to right, red,yellow);从左向右渐变，前面加个to right,
    - 可以写to left, to right,to bottom,to top或者xxxdeg，deg表示的是度数，也可以top right
    - 同时可以设置多个颜色，默认情况下是平均分布
    - 也可以手动指定渐变的分布情况background-image: linear-gradient( red 50px,yellow); 相当于从0-50都是纯红，没有过渡效果，50开始渐变
  - repeating-linear-gradient()可以平铺的线性渐变
    - background-image: repeating-linear-gradient(red 50px,yellow 100px);
  - 径向渐变radial-gradient()放射性效果
    - background-image:radial-gradient(red , yellow)
    - 默认情况下，径向渐变的圆心形状是根据元素的形状进行计算的
      - 正方形--圆形
      - 长方形--椭圆形
      - 我们也可以手动指定渐变的大小（100px 100px 中间不要加逗号）background-image:radial-gradient(100px 100px,red , yellow,green)
        
        上面的100px 100px可以改为circle和ellipse
      - 我们也可以指定渐变的位置，指定渐变圆心的位置background-image:radial-gradient(100px 100px at 0 0,red , yellow,green) 在100px 100px 后面加上at 0 0，中间没有逗号，表示圆心在00点。at center center
语法：
- radial-gradient（大小 at位置，颜色位置，颜色位置）、
  - 大小：
    - circle 圆形
    - ellipse 椭圆
    - closest-side 近边
    - closest-corner 近角
    - farthest-side 远边
    - farthest-corner 远角
  - 位置：
    - top right left center bottom

码农公寓

相关文章