background简写属性的书写顺序,以及各个属性的含义

background简写属性的顺序:是background-color,background-image,background-repeat,background-attachment,background-position,background-size。

body
{ 
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center/100% 100%; 
}

注意:如果用background-size,一定要用/分隔

background一共有8个属性 来设置background的形状

  • background-color: 背景颜色
  • background-image: 背景图片
  • background-repeat: 重复背景图片
  • background-attachment: 是否固定或者随着页面的其余部分滚动
  • background-position: 背景图片的位置
  • background-size: 背景的尺寸
  • background-origin: 背景图片定位区域
  • background-clip: 背景图片绘制区域
     

接下来我们依次看一下每个属性的作用和功能:

background-color: 背景颜色 mdn文档

默认值:transparent 背景颜色为透明。

background-color: white; // 系统定义的颜色名
background-color: rgb(255,255,255); // rgb 和 rgba 格式
background-color: hsla(120,30%,24%,.3); // hsla() 中的a 是Alpha 通道,表示不透明度,值为0到1

background-image: 背景图片 mdn文档

默认值:none

linear-gradient() //创建一个线性渐变的 "图像"(从上到下)
radial-gradient() //用径向渐变创建 "图像"
repeating-linear-gradient() //创建重复的线性渐变 "图像"。
repeating-radial-gradient() //创建重复的径向渐变 "图像"
inherit //指定背景图像应该从父元素继承

background-repeat: 重复背景图片 mdn文档

属性介绍:background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

默认值:repeat 背景图像将向垂直和水平方向重复

repeat-x // 背景图像将在水平方向重复。
repeat-y // 背景图像将在垂直方向重复。
no-repeat // 背景图像将仅显示一次。
inherit // 规定应该从父元素继承 background-repeat 属性的设置。

background-attachment是否固定或者随着页面的其余部分滚动 mdn文档

属性介绍:background-attachment CSS 属性决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。

默认值:scroll //背景图像会随着页面其余部分的滚动而移动。

 background-attachment: fixed; //当页面的其余部分滚动时,背景图像不会移动。
 inherit // 规定应该从父元素继承 background-attachment 属性的设置。

background-position: 背景图片的位置 mdn文档

属性介绍:background-position CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

默认值:0% 0%
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

background-position:center; // 居中
background-position:20% 20%;
background-position:top left; // x轴和y轴的设置 还有多种搭配就不一一写了

background-size: 背景的尺寸 mdn文档

属性介绍:background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

默认值:auto

background-size:auto;
//以背景图片的比例缩放背景图片。

ackground-size:80px 60px; 
// 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。


background-size:cover;

//把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
//缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和 contain 值相反,cover 值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时,背景图的 左/右 或者 上/下 部分会被裁剪。


background-size:contain;

//把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
//缩放背景图片以完全装入背景区,可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例(图像不会被压缩)。该背景图会填充所在的容器。当背景图和容器的大小的不同时,容器的空白区域(上/下或者左/右)会显示由 background-color 设置的背景颜色。

background-origin: 背景图片定位区域 mdn文档

属性介绍:background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域。

注意:当使用 background-attachment 为 fixed 时,该属性将被忽略不起作用。

默认值:padding-box 背景图像相对于内边距框来定位。

background-origin:content-box; // 背景图像相对于内边距框来定位。
background-origin:border-box; // 背景图像相对于边框盒来定位。
background-origin:content-box; // 背景图像相对于内容框来定位。

background-clip mdn文档

属性介绍:设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

默认值:border-box //背景被裁剪到边框盒。

background-clip:padding-box; // 背景延伸至内边距(padding)外沿。不会绘制到边框处。
background-clip:content-box; // 背景被裁剪至内容区(content box)外沿。
background-clip:border-box; // 背景延伸至边框外沿(但是在边框下层)。

你可能感兴趣的:(scss,html,前端)