[分享]css3多重背景用法

在网页设计中，背景是非常重要的一部分。CSS3的多重背景用法可以让我们更加灵活地控制背景的呈现方式。接下来我们来学习一下多重背景的用法。.background { backgroundimage: u...

在网页设计中，背景是非常重要的一部分。CSS3的多重背景用法可以让我们更加灵活地控制背景的呈现方式。接下来我们来学习一下多重背景的用法。

.background {
  background-image: url(images/bg1.jpg), url(images/bg2.png);
  background-position: top left, center center;
  background-repeat: no-repeat, repeat;
  background-size: auto, cover;
  background-attachment: fixed, scroll;
} 

上面这个例子中，我们通过逗号分隔的方式来添加多个背景。第一个背景图是bg1.jpg，位于左上角；第二个背景图是bg2.png，位于中心。第一个背景图不会平铺，而第二个背景图会以cover方式平铺。第一个背景图是固定的，而第二个背景图会跟随滚动。

.background {
  background-image: linear-gradient(to bottom, #ff0000, #00ff00), url(images/bg1.jpg);
  background-position: center center, top left;
  background-repeat: no-repeat, repeat;
  background-size: auto, cover;
  background-attachment: fixed, scroll;
} 

在这个例子中，我们将两个背景合并在一起。第一个背景是一个渐变色，从红色到绿色，方向从上到下。第二个背景是bg1.jpg。第一个背景是不平铺的。

多重背景可以让我们更好地控制背景的表现形式，从而更好地满足我们的设计需要。