一篇文章学会 CSS 属性：background

CSS background属性就像元素的壁纸 - 它允许您选择视觉背景来设置内容的基调和基调。正如精心挑选的壁纸可以改变房间一样，该background属性允许您用颜色、图像、渐变甚至良好的老式纯色背景来美化您的网页。它是表达您的创意天赋并使您的设计流行的完美工具！

语法：

该属性的语法background简单且灵活。看一下这个例子：

selector {
background: value;
}

默认情况下，该background属性设置为transparent，充当不可见的画布，让其他元素透过。此属性适用于几乎所有元素，从卑微<div>到强大<body>。但是，请记住，并非所有元素都支持该background属性的所有可能值。例如，您不会期望 a<button>显示背景图像，对吗？请留意此类警告。

在大多数情况下，该background属性不是继承的，这意味着子元素不会从其父元素继承背景。但是，这可能会根据您使用的值而有所不同，因此请务必仔细检查每个值的具体行为。

虽然该background属性不直接支持 CSS 动画，但不用担心！您仍然可以使用 CSS 动画为属性的各个组件设置动画background，例如颜色、位置或大小。可以将其想象为在壁纸中添加一些微妙的动态 - 一丝优雅让您的设计栩栩如生！

背景颜色

该关键字设置元素的背景颜色。选择您想要的任何颜色，然后观看您的元素以充满活力的色调变得栩栩如生：

selector {
background-color: color;
}

背景图

此关键字允许您将图像设置为元素的背景。就像在墙上挂了一幅美丽的画，瞬间改变了气氛：

selector {
background-image: url(’image.jpg’);
}

背景重复

使用此关键字，您可以控制背景图像的重复方式。想象一个完美对齐的图案，无缝地流过您的元素：

selector {
background-repeat: repeat;
}

背景位置

该关键字决定背景图像的位置。向左、向右、向上或向下移动以找到完美的位置：

selector {
background-position: center;
}

背景大小

使用此关键字更改背景图像的大小。拉伸它、收缩它，或者让它覆盖整个元素——选择权在你手中：

selector {
background-size: cover;
}

学 CSS：完整案例

1.背景位置偏移

放置背景图形非常简单，您可能已经熟悉了。如果我们想将背景定位到元素的右下角，我们应用bottom right到background-position. 例如：

#workspace {
    width: 100%;
   max-width: 668px;
   height: 400px;
   background-color: #525d62;
   background-image: url(images/macbook.png);
   background-repeat: no-repeat;
   background-position: right bottom;
}

background或者，在 url 定义之后使用简写, ：

#workspace {
    width: 100%;
   max-width: 668px;
   height: 400px;
   background: #525d62 url(images/macbook.png) no-repeat right bottom;
}

自从 CSS3 出现以来，我们已经能够指定位置偏移量；到设定位置的精确距离。以的示例为例bottom right，我们将bottom 20px right 30px背景定位在20px从底部和30px左侧开始的位置。

#workspace {
    width: 100%;
   max-width: 668px;
   height: 400px;
   background-color: #525d62;
   background-image: url(images/macbook.png);
   background-repeat: no-repeat;
   background-position: right 30px bottom 20px;
}

位置 ( bottom, top, right, left) 可以按任何顺序定义，但必须在每个背景位置之后定义偏移长度。

See the Pen Background Position by Envato Tuts+ (@tutsplus) on CodePen.

2.多背景图片

该background属性还允许我们添加多个背景图像。因此，让我们用更多的东西和小工具来扩展前面的示例。

See the Pen Multiple Background by Envato Tuts+ (@tutsplus) on CodePen.

我们将这些图像添加到单个background或background-image声明中，并用逗号分隔每个图像。我们使用该background-position属性（也接受多个值）来控制每个背景图像。

#workspace {
   height: 400px;
   background-color: #525d62;
   background-image:
        url(images/macbook.png),
       url(images/mouse.png),
       url(images/hdd.png),
       url(images/phone.png),
       url(images/ipad.png),
       url(images/coffee.png),
       url(images/camera.png);
   background-repeat: no-repeat;
   background-position:
            50% 50%,   /* macbook.png */
            75% 295px, /* mouse.png */
            75% 230px, /* hdd.png */
            96% 240px, /* phone.png */
            20% 250px, /* ipad.png */
            22% 190px, /* coffee.png */
            7% 280px; /* camera.png */
}

我们可以使用固定单位（例如像素）、灵活单位（例如百分比）或两者的组合。

每对值表示从容器元素的左上角到图像的左上角的坐标。例如，相机图像的左上角距离容器顶部 280 像素，然后是左侧可用宽度的 7%。

注意：可用宽度是容器元素的总宽度减去背景图像的宽度。因此，沿 x 轴定位 50% 的背景图像看起来完全居中！

动图

此外，由于background-position是一个可动画的属性，我们可以创建一个更加生动、引人注目的背景：

#workspace {
   width: 600px;
   height: 400px;
   background-color: #525d62;
    background-repeat: no-repeat;
   background-image:
        url(images/macbook.png),
        url(images/mouse.png),
       url(images/hdd.png),
       url(images/phone.png),
       url(images/ipad.png),
       url(images/coffee.png),
       url(images/camera.png);
   background-position:
       50% 50%,
       430px 295px,
       425px 230px,
       480px 240px,
       105px 250px,
       120px 190px,
       40px 280px;
   animation: 3s ease 0s inView forwards;
}
@keyframes inView {
    0% {
       background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px;
       background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
   }
   20% {
       background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px;
       background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
   }
   30% {
       background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px;
       background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
   }
   40% {
       background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px;
       background-position-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%;
   }
   50% {
       background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
       background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%;
   }
   60% {
       background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
       background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%;
   }
   100% {
       background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
   }
}

在这里，我们沿着时间轴设置了许多关键帧。在每个关键帧，我们都更改了每个背景图像的background-position-x和。background-position-y动画确实很初级，所以请 fork CodePen 并改进它！

注：点击笔右下角的Rerun可以看到动画：

See the Pen Multiple Background with Animation by Envato Tuts+ (@tutsplus) on CodePen.

几个值得注意的点:

我们使用的背景是按顺序排列的；第一个列出的出现在堆栈的顶部，而最后列出的将出现在后台堆栈的底部。

#workspace {
    width: 600px;
    height: 400px;
   background-color: #525d62;
   background-image:
        url(images/macbook.png),
       url(images/mouse.png),
       url(images/hdd.png),
       url(images/phone.png),
       url(images/ipad.png),
       url(images/coffee.png),
       url(images/camera.png); /* stacked at the bottom */
   background-repeat: no-repeat;
}

所有背景子属性（background-repeat、等）都background-size可以background-position定义多次，除了background-color。如果我们使用简写background属性应用多个背景，请将背景颜色定义为最新生效的值。例如：

#workspace {
   height: 400px;
   background:
        url(images/macbook.png) 50% 50% no-repeat,
       url(images/mouse.png) 430px 295px no-repeat,
       url(images/camera.png) 425px 230px no-repeat #525d62;
}

或者，background-color在简写属性后面添加一个单独的：

#workspace {
    width: 600px;
    height: 400px;
   background:
        url(images/macbook.png) 50% 50% no-repeat,
       url(images/mouse.png) 430px 295px no-repeat,
       url(images/camera.png) 425px 230px no-repeat;
    background-color: #525d62;
}

这两个代码的作用相同，但我发现后者更加直观和可读。

3.混合背景图像

其background-blend-mode功能与 Photoshop 或 Gimp 等图形应用程序中的功能相同；它将背景图像相互混合，以及与下面的任何内容混合。

它采用了熟悉的价值观，background-blend-mode例如乔纳森·卡特雷尔（Jonathan Cutrell）在他关于该主题的教程中出色地解释了其他一些价值观。我强烈建议您仔细阅读它，以便我们可以直接了解一些实际示例。

See the Pen Background Blend Mode: Gradient by Envato Tuts+ (@tutsplus) on CodePen.

为了创建这种效果，我们添加背景图像和渐变，并应用overlay混合模式。

#blend {
   background-repeat: no-repeat;
   background-image: url( 'img/people-15.jpg' ),
                      linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%);
   background-blend-mode: overlay;
}

叠加层会影响此处列出的两个背景，因此如果您不希望所有内容都混合在一起，则可能需要小心。如果我们想避免所有内容与背景颜色混合，请设置第二个值，该值normal将应用于我们的第二个背景图像。

#blend {
   background-repeat: no-repeat;
   background-image: url( '../img/people-15.jpg' ),
                      linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%);
   background-color: yellow;
    background-blend-mode: overlay, normal;
}