文章目录

背景
雪碧图与渐变

背景

1. PS 的基本设置

工欲善其事，必先利其器

在介绍背景之前，首先需要做好准备工作：安装 PS 与基本设置

这里就不详细介绍 PS 的安装了，因为网上一抓一大把，主要介绍 PS 的基本设置

左侧工具栏

调成 2 列，更方便使用

右侧工具栏

不需要的视图统统关掉

修改单位为像素

由于一般默认的单位是厘米，所以这里需要修改

在历史记录、颜色或色板附近右键，打开选项卡，选择界面选项

打开单位与标尺，修改单位中的标尺与文字为像素

2. 背景

background-color 设置背景颜色
background-image 设置背景图片
- 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满
- 如果背景图片大小大于元素，则背景图片一部分会无法完全显示
- 如果背景图片大小等于元素，则背景图片会直接正常显示
background-repeat 设置背景图片的重复方式
- repeat 默认值，背景图片沿着 x 轴和 y 轴双方向重复
- repeat-x 背景图片沿着 x 轴方向重复
- repeat-y 背景图片沿着 y 轴方向重复
- no-repeat 背景图片不重复
background-position 设置背景图片的位置
- 通过top left right bottom center几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
- 通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量
background-clip 设置背景的范围
- border-box 默认值，背景会出现在边框的下边
- padding-box 背景不会出现在边框，只出现在内容区和内边距
- content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
- border-box 背景图片的变量从边框处开始计算
- padding-box 默认值，background-position从内边距处开始计算
- content-box 背景图片的偏移量从内容区处计算
background-size 设置背景图片的大小
- 第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是auto
- cover 图片的比例不变，将元素铺满
- contain 图片比例不变，将图片在元素中完整显示
background-attachment 背景图片是否跟随元素移动
- scroll 默认值，背景图片会跟随元素移动
- fixed 背景会固定在页面中，不会随元素移动

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

示例 1

.box1 {
    
    
  height: 500px;
  width: 500px;
  overflow: auto;
  border: 20px red double;
  padding: 10px;
  /* 背景色 */
  background-color: darksalmon;
  /* 背景图 */
  background-image: url("/assets/背景.png");
  /* 背景图重复方式 */
  background-repeat: no-repeat;
  /* 背景图偏移位置 */
  background-position: 0 0;
  /* 背景图偏移量计算的原点 */
  background-origin: content-box;
  /* 背景范围 */
  background-clip: content-box;
  /* 背景图片大小 */
  background-size: contain;
}

.box2 {
    
    
  width: 100px;
  height: 1000px;
  background-color: orange;
  background-image: url("assets/背景2.jpg");
  background-repeat: no-repeat;
  background-position: 50px 50px;
  /* 背景图片是否跟随移动 */
  background-attachment: fixed;
}

backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的

注意

background-size必须写在background-position的后边，并且使用/隔开background-position/background-size
background-origin background-clip 两个样式，orgin要在clip的前边

示例 2

.box1 {
    
    
  height: 500px;
  width: 500px;
  border: 10px red double;
  padding: 10px;
  background: #bfa url("assets/dlam.png") no-repeat 100px 100px/200px
    padding-box content-box;
}

练习 1：线性渐变效果的背景图

如果我们仔细挂那可能，会发现很多网站导航条的背景色并不是单一的某种颜色，而是有一个渐变的效果

不过到目前为止，我们还没有学习线性渐变的内容，不过凭上面所学的知识同样可以实现

切图

首先，我们需要通过 PS 软件进行切图

按住Alt同时滚动鼠标滑轮，可以对图片大小进行缩放；调整至合适大小，再选择矩形块工具，截取一个宽度为 1px 大小的图片

然后选择图像-裁剪，就可以得到一个我们需要的一个背景图片

最后，选择文件-存储为Web所用格式

我这里选择的是 PNG 的格式，你可以对比几种格式，看看最终的图片大小折中选择，最好选择存储位置即可

得到我们需要的背景图片之后，就可以引入到css样式中了

代码

height: 60px;
width: 1500px;
background: url("assets/背景3.png") repeat-x;

效果

练习 2：按钮点击效果

代码

<style>
  a:link {
      
      
    /* 因为本身是行内元素，变成块元素更方便设置宽高 */
    display: block;
    width: 93px;
    height: 29px;
    background: url("assets/背景/练习2-背景/link.png");
  }

  a:hover {
      
      
    background: url("assets/背景/练习2-背景/hover.png");
  }

  a:active {
      
      
    background: url("assets/背景/练习2-背景/active.png");
  }
</style>

<a href="javascript:;"></a>

效果

雪碧图与渐变

3. 雪碧图

解决图片闪烁的问题：

可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片

这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题

这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图

雪碧图的使用步骤：

先确定要使用的图标
测量图标的大小
根据测量结果创建一个元素
将雪碧图设置为元素的背景图片
设置一个偏移量以显示正确的图片

雪碧图的特点：

一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

示例 1

a:link {
    
    
  display: block;
  width: 93px;
  height: 29px;
  background: url("assets/背景/练习2-背景/btn.png");
  /* 默认值，可以不设置 */
  background-position: 0 0;
}

a:hover {
    
    
  /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
  background-position: -93px 0;
}

a:active {
    
    
  /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
  background-position: calc(-93px * 2) 0;
}

我们对比以下之前练习中的效果，第一次加载进来的时候会有明显的闪烁

示例 2

.box1 {
    
    
  width: 109px;
  height: 33px;
  background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
  /* 设置水平和垂直方向的一个偏移量；注意移动方向 */
  background-position: -10px -10px;
}

.box2 {
    
    
  width: 42px;
  height: 30px;
  background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
  /* 设置水平和垂直方向的一个偏移量；注意移动方向 */
  background-position: -58px -338px;
}

4. 线性渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

！！渐变是图片，需要通过background-image来设置

线性渐变，颜色沿着一条直线发生变化 linear-gradient()

# 红色在开头，黄色在结尾，中间是过渡区域
background-image: linear-gradient(red, yellow);

线性渐变的开头，我们可以指定一个渐变的方向

to left
to right
to bottom
to top
deg deg 表示度数
turn 表示圈

background-image: linear-gradient(to left, red, yellow);
background-image: linear-gradient(to right, red, yellow);
background-image: linear-gradient(to top, red, yellow);
background-image: linear-gradient(to bottom, red, yellow);

上面基本的 4 个方向的渐变很好理解，我们就不再做过多的一一解释了

我们来看度数的渐变效果

background-image: linear-gradient(45deg, red, yellow);

会发现它是从左下角往右上角去进行渐变的，为什么呢？

我们小时候肯定都用过量角器

是不是恍然大悟，我们以原点作为起始点，有角度的那条边去做渐变，再把四象限的概念和矩形内部的四个角对应起来

总结：线性渐变的边上的某一点为起点，以一定角度渐变的；渐变方向的颜色是线性变化的，而其垂线方向的颜色是一致的

然后看下圈数的表示方法

background-image: linear-gradient(0.4turn, red, yellow);

因为圈数和角度之间可以相互转换，所以这里就不再进行赘述了

另外，渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况

repeating-linear-gradient() 可以平铺的线性渐变

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

默认情况下，跟linear-gradient(red, yellow)效果一样，我们稍作改动

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

由于我们设置的div宽高为200px，所以会有 4 次重复的渐变效果

所以默认情况下，下列几种写法是一致的，效果相同

background-image: linear-gradient(red, yellow);
background-image: repeating-linear-gradient(red, yellow);
/* 因为我们设置的div盒子的宽高为200px，所以这里[height]=200px */
background-image: repeating-linear-gradient(red 0, yellow [height]);

5. 径向渐变

radial-gradient() 径向渐变（放射性的效果）

background-image: radial-gradient(red, yellow);

默认情况下，径向渐变的形状根据元素的形状来计算的

正方形 --> 圆形
长方形 --> 椭圆形

默认情况下，circle和ellipse是自动适配盒子的，我们也可以手动指定径向渐变的形状

形状

circle 圆形
ellipse椭圆

background-image: radial-gradient(circle, red, yellow);

也可以指定渐变的位置

位置

top
right
left
center
bottom

background-image: radial-gradient(at left, red, yellow);

当然，除了上述值，还可以指定像素

大小

closest-side 近边
farthest-side 远边
closest-corner 近角
farthest-corner 远角

background-image: radial-gradient(100px 60px, red, yellow);

同时对其形状/大小和位置进行指定

radial-gradient(形状/大小 at 位置, 颜色位置, 颜色位置, 颜色位置)

background-image: radial-gradient(circle at 50px 100px, red 50px, yellow 100px);

总结一下

形状

circle 圆形
ellipse椭圆

大小

closest-side 近边
farthest-side 远边
closest-corner 近角
farthest-corner 远角

位置

top
right
left
center
bottom

类似于线性渐变，径向渐变也有对应的repeat属性

background-image: repeating-radial-gradient(
  circle at 50px 100px,
  red 50px,
  yellow 100px
);

总结：径向渐变的渐变方向以圆心为起点，往四周扩散的；同一半径上的颜色是渐变的，同一圆周上的颜色是一致的

前端基础入门之背景background-image 、雪碧图与渐变

文章目录

背景

1. PS 的基本设置

2. 背景

练习 1：线性渐变效果的背景图

练习 2：按钮点击效果

雪碧图与渐变

3. 雪碧图

4. 线性渐变

5. 径向渐变

猜你喜欢

前端基础入门之背景background-image 、 雪碧图与渐变

文章目录

背景

1. PS 的基本设置

2. 背景

练习 1：线性渐变效果的背景图

练习 2：按钮点击效果

雪碧图与渐变

3. 雪碧图

4. 线性渐变

5. 径向渐变

猜你喜欢

前端基础入门之背景background-image 、雪碧图与渐变