[分享]css两张图片做背景图

CSS是一种用于前端设计的语言，它能让你美化网页并且控制网页的布局和样式。其中，使用两张图片做背景图是一种常用的CSS技巧，下面就让我们来学习一下。html { backgroundimage: ur...

CSS是一种用于前端设计的语言，它能让你美化网页并且控制网页的布局和样式。其中，使用两张图片做背景图是一种常用的CSS技巧，下面就让我们来学习一下。

html {
  background-image: url("bg1.jpg"), url("bg2.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;
} 

在上述代码中，我们首先给网页HTML元素设置了两张背景图片，分别为“bg1.jpg”和“bg2.jpg”，并且禁止了图片在网页内的重复。接下来，我们设置了两张图片的位置，第一张图片位于左上方，第二张图片位于右下方。

那么这两张背景图片是怎么出现在网页中的呢？我们来解释一下。

当我们设置HTML元素的背景图片时，这些图片会默认填充整个网页。如果只有一张背景图片，那么它将填充整个页面并覆盖其他内容。但是，当我们设置两张背景图片时，这两张图片将堆叠在一起，同时出现在网页上。

通过使用两张背景图片做背景图，我们可以为网页添加更多的图像元素，同时也让网页看上去更加协调和有序。

懂得如何使用两张背景图片做背景图是非常有用的CSS技巧，它能够让你掌握更多的设计手段和方法，提升网页的设计质量。