skysat重访周期
学习CSS：完整指南
无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都已构建了完整的指南来帮助您学习 CSS。
在本教程中，我们将研究更老的，更熟悉CSS属性之一： background 。 background是经常被忽略CSS属性之一。 实际上，它看到了CSS3的升级，不仅增加了背景图片或颜色，还获得了新的功能。 让我们看看其中的一些！
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;
} 或者，在URL定义后使用简写形式background ：
#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包括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 ）可以按任何顺序定义，但是偏移长度必须在每个背景位置之后定义。
图片由Metin Kazan提供。
2.多个背景图片
background属性还允许我们添加多个背景图像。 因此，让我们用更多的东西和小工具扩展前面的示例。
我们通过用逗号分隔每个图像，将这些图像添加到单个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 。 动画是基本的，所以请派出CodePen并对其进行改进！
注意：单击笔右下角的“ 重新运行 ”以查看动画
了解有关CSS动画的更多信息
几个值得注意的要点
我们使用的背景是按顺序排序的； 列出的第一个出现在堆栈的顶部，而列出的最后一个出现在背景堆栈的底部。
#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-color外，所有背景子属性（ background-repeat ， background-size ， background-position等）都可以定义多次。 如果我们使用速记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;
} 或者，在short-hand属性之后添加一个单独的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等图形应用程序中发现的功能相同； 它将背景图像彼此融合，也融合了其下的所有元素。
要创建此效果，我们添加背景图像和渐变，然后应用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;
}4.背景剪辑
background-clip属性是一个实用程序，用于控制CSS内容框模型中背景颜色和图像的范围。 与box-sizing属性类似， background-clip属性采用三个有效值，即：
-
border-box是默认值，它将覆盖背景图像或颜色，一直到元素的外部边缘。 -
padding-box会将背景延伸到padding的外边缘，换句话说； 边框的内边缘。 -
content-box将在元素内容content-box保留背景，如下所示：
我发现background-clip很方便的一个实际示例是当我必须使用单个元素创建带有图标的按钮时。 在下面的演示中，即使我们在每侧添加填充，我们的图像也从元素的左边缘延伸到右边缘，因为它仍然应用border-box 。
如果我们想在图标周围加上一些空格，则传统上我们必须将其包裹在另一个元素上，并在该额外元素上应用填充。 通过使用background-clip属性，我们可以将其设置为content-box ，并用与背景色相同颜色的边框替换填充，从而优雅地实现它。
结语
background属性是我们在项目中经常使用的属性。 希望本文能使您想起它的广泛用途，我希望在评论中听到更多的想法。
最后一点：浏览器对这些属性的支持（ background-blend-mode除外）非常棒。 根据CanIUse的说法 ，从Internet Explorer 9开始，支持多个背景，并且仅存在一些琐碎的问题。 背景图像选项（例如background-clip属性）几乎一样好 。
在撰写本文时， 混合模式在Chrome，Opera中效果最好，由于存在一些错误，它们在Safari中部分适用，但可悲的是Microsoft Edge没有取得任何进展的迹象。
翻译自: https://webdesign.tutsplus.com/tutorials/revisiting-the-css-background-property--cms-25991
skysat重访周期
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
