前端CSS学习-Background背景相关

2021年09月15日 阅读数:1
这篇文章主要向大家介绍前端CSS学习-Background背景相关,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

在CSS中 背景属性用于定义HTML元素的背景。

background主要设置一下五个属性:

  • background-color  // 设置元素的背景颜色。
  • background-image // 把图像设置为背景。
  • background-repeat  // 设置背景图像是否及如何重复。
  • background-attachment  // 背景图像是否固定或者随着页面的其他部分滚动。
  • background-position  // 设置背景图像的起始位置。

1. background-color   // 背景颜色

这个属性定义了元素的背景颜色, 它有三种定义方式:
css

  • 十六进制 - 如:"#ff0000"
  • RGB - 如:"rgb(255,0,0)"
  • 颜色名称 - 如:"red"

给文本设置background-color能够实现文本高亮效果.url

2. background-image // 背景图像spa

这个属性定义了元素的背景图像, 使用方法设计

 

  • 绝对路径写法:
  • background-image:url("/img/3.jpg");
  • 或者:
  • background-image:url(/img/3.jpg);
  • 相对路径写法:
  • background-image:url(“../img/3.jpg”);
  • 或者:
  • background-image:url(../img/3.jpg);

固然也能够设置多个图片, 注意要用逗号来分隔: 好比code

background-image:url('res/1.jpg'),url('res/2.jpg');blog

1.jpg会默认显示在2.jpg的上方继承

3. background-repeat  // 设置图像如何平铺

默认的状况下, image的渲染方式是在页面的水平或者垂直方向平铺, 可是有时候这样会显得不协调, 这个时候就须要来经过设置图片

background-repeat 来设置背景图像的平铺方式.string

咱们能够这样设置.it

 1 background-repeat:repeat-x; // 在x轴的方向上平铺
 2 
 3 background-repeat:repeat-y; // 在y轴发方向上平铺
 4 
 5 background-repeat:repeat-x repeat-y; // 在x 和 y 轴方向上平铺
 6 
 7 background-repeat:space; // 均匀的平铺背景图片,不会被裁剪 不会拉伸图片
 8 
 9 background-repeat:round; // 水平和垂直平铺背景图片,拉伸图片以尽量的填充背景,不会被裁剪 
10 
11 background-repeat:no-repeat; // 不进行平铺 

4.  background-position // 设置图像位置

图像默认显示的位置是top left即左上角, 这样知足不了咱们设计的预期, 这时就须要来设置 background-position属性来设置图像的初始位置了.

怎么使用 就是 top right left bottom center 这样来组合设置, 若是只设置了某一个属性那么其它的默认是center.

这个属性还有两种设置方式:

1) 经过%来设置 

background-position: 20% 30%; // 距离视图左边20%, 上面30%;

若是只是设置了一个好比:

bcakground-position: 20%;

那么就是距离左边20%; 而在水平方向上默认为居中显示.

2)经过px来设置

background-position: 200px 300px; // 距离视图左边界200个像素单位, 距离视图上边界300个像素单位

若是只是设置了一个好比:

bcakground-position: 200px;

那么就是距离左边200个像素单位; 而在水平方向上默认为居中显示.

固然也能够这样来设置:

1 background-position:left 10px bottom 20px; // 背景图片水平方向与左边缘相距10px,垂直方向与底部边缘相距20px

5. background-attachment // 设置图像是否随着页面滚动.

background-attachment: scroll  // 背景图片随页面的其他部分滚动 默认设置
background-attachment:fixed  // 背景图像是固定的
background-attachment:inherit  // 指定background-attachment的设置应该从父元素继承

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

默认值 auto auto // 背景图片的原始大小

示例:

1 background-size:100px; // 宽度为100px 高度为原始大小
2 background-size:100px 200px; // 宽度为100px 高度为200px
3 background-size:100px 50%; // 宽度为100px 高度为页面大小的50%
4 background-size:100% 100%; // 宽和高均为100% 占满整个视图