CSS学习记录03 - 技术栈

CSS背景

CSS 背景属性用于定义元素的背景效果。

CSS background-color

background-color属性指定元素的背景色。

页面的背景色设置如下：

css 复制代码

body {
  background-color: lightblue;
}

通过CSS，颜色通常由以下方式指定：

有效的颜色名称-比如"red"
十六进制值-比如"#ff0000"
RGB值-比如"rgb（255,0,0)"

其他元素

您可以为任何HTML元素设置背景颜色：

举例：<h1>、<p> 和 <div> 元素将拥有不同的背景色：

css 复制代码

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

不透明度/透明度

opacity属性指定元素的不透明度/透明度。取值范围0.0 -1.0。值越低，越透明：

css 复制代码

div {
  background-color: green;
  opacity: 0.3;
}

注意：使用opactiy属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用RGBA的透明度

如果您不希望对子元素应用不透明度，请使用RGBA颜色值。下面的例子背景色而不是文本的不透明度：

css 复制代码

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

CSS背景图像

background-image 属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。

例如：

页面的背景图像可以像这里设置：

css 复制代码

body {
  background-image: url("paper.gif");
}

注意：使用背景图象时，请使用不会干扰文本的图像。还可以为特定元素设置背景元素，例如<p>元素：

css 复制代码

p {
  background-image: url("paper.gif");
}

CSS背景重复

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。某些图像只适合水平或垂直方向上重复。

css 复制代码

body {
  background-image: url("gradient_bg.png");
}

如果上面的图像仅在水平方向上重复（background-repeat: repeat-x;),则背景看起来会更好：

css 复制代码

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

提示：如需垂直重复图像，请设置 background-repeat: repeat-y。

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

背景图像仅显示一次：

css 复制代码

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

CSS background-position

background-position 属性用于指定背景图像的位置

举例：

把背景图片放在右上角：

css 复制代码

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

CSS 背景附着

CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

指定应该固定背景图像：

css 复制代码

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

指定背景图像应随页面的其余部分一起滚动：

css 复制代码

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

CSS背景简写

如需缩短代码，也可以在一个属性中指定所有背景属性，它被称为简写属性。

css 复制代码

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

使用简写属性在一条声明中设置背景属性：

css 复制代码

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。

所有 CSS 背景属性

属性	描述
background	在一条声明中设置所有背景属性的简写属性。
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	规定背景图像的尺寸。

补充知识

background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

css 复制代码

 h1 {
    background: url(./assets/img/161105-17318310655d07.jpg);
    background-clip: text;
    color:transparent;
    font-size: 200px;
    background-origin: left;
    
  }

如果没有设置(background-image）或背景颜色（background-color），那么这个属性只有在边框（ border ）被设置为非固实（soild）、透明或半透明时才能看到视觉效果，否则，本属性产生的样式变化会被边框覆盖。

background-origin

background-origin规定了背景图片background-image属性的原点位置的背景相对区域。注意：当使用background-attachment为 fixed 时，该属性将被忽略不起作用。

css 复制代码

/* 关键字值 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

background-size

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

css 复制代码

/* 关键字 */
background-size: cover
background-size: contain

注意：没有被背景图片覆盖的背景区域仍然会显用background-color属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

cover：

缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

contain:

缩放背景图片以完全装入背景区，可能背景区部分空白。