如何用图像（不止一个）和渐变制作背景

Question

是否可以用3张图片和渐变制作背景？

我想制作背景，其中一张图片将在整个网站上重复，并在其上添加渐变。然后第二张图片将显示在右中，第三张显示在左中。请给我一个使用的例子。编辑：现在我有

background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 69%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.5) 100%), url('images/block.png') repeat 0% 0%, url('images/chef.png') no-repeat 0 0;

Answer 1

您可以在提问前在 Google 上搜索信息，但这里是您的答案：

.multi_bg_example {
    width: 100%;
    height: 500px;
  background-image   : url(/exp.png),
                       url(/exp2.png),
                       linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));

  background-repeat  : no-repeat,
                       no-repeat,
                       no-repeat;

  background-position: bottom right,
                       left,
                       right;
}

http://jsfiddle.net/d1ceayxv/ 更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

如何用图像（不止一个）和渐变制作背景

How to make background with images (more than one) and gradient

css

gradient

background

image