多个透明背景图像

Question

我有两个背景 jpeg 图片，它们在我网站的整个左右边框上垂直重复。

这是我的代码：

.gradients {
background-image: url("outer-gradient.jpg"), url("outer-gradient-horizontal-flip.jpg");
background-position: top left, top right;
background-repeat: repeat-y;
}

<body>
  <div class="gradients">
    <div> website content in here </div>
  </div>
</body>

这是它的样子：

left and right background images

我需要一种使这两个 jpeg 透明的方法。

请不要建议我只使用 CSS 渐变，我不能使用 CSS 渐变，因为使左右图像保持原样所需的颜色复杂性。这些 jpeg 有数百种颜色，比任何 CSS 渐变都更丰富。

我见过通过在其前面或后面添加不透明度 div 使单个背景图像透明的方法。当我有两个背景图像时，如何为我的 .gradient div 执行此操作？

Answer 1

我可以想到几个方法：

您应该将它们放在单独的 div 中，并将这些 div 放在主容器/包装器下面。您可以 css 相应地放置它们。
您可以使用允许透明度渐变的实际 .png 图像
您可以使用在一个文件中已经具有渐变和所需背景颜色的背景图像。然后你可以让它 background-repeat: repeat-y;和背景大小：包含。

Answer 2

I need a way to make both of these jpegs transparent.

因为你不能简单地将 opacity 给 gradients div，这也会影响网站内容，你可以使用伪元素，就像这样，这将不影响网站内容

.gradients {
  position: relative;
  padding: 0 60px;         /*  for this demo, push the content off the image  */
}
.gradients::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;             /*  width of your jpg file  */
  height: 100%;
  background-image: url(http://placehold.it/50/00f);
  background-position: top left;
  background-repeat: repeat-y;
  opacity: 0.5;
  z-index: -1;
}

.gradients::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;             /*  width of your jpg file  */
  height: 100%;
  background-image: url(http://placehold.it/50/f00);
  background-position: top right;
  background-repeat: repeat-y;
  opacity: 0.5;
  z-index: -1;
}

<body>
  <div class="gradients">
    <div>
      website content in here<br>
      website content in here<br>
      website content in here<br>
      website content in here<br>
      website content in here<br>
      website content in here<br>
    </div>
  </div>
</body>

Answer 3

我不确定这是什么意思：

These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.

如果可以在 Photoshop 中制作它们，则可以在 CSS 中制作渐变。根据定义，渐变是数百种颜色，因为它从一种颜色过渡到另一种颜色（可能还有另一种颜色）。您分享的屏幕截图绝对可以使用 CSS 渐变进行复制。

但是，既然您要求排除这种可能性，我建议您使用 24 位 PNG 而不是 JPG。 24 位 PNG 有一个 alpha 透明通道，可以让您完全控制它们的整体透明度以及每个像素的透明度。此时没有 background-transparency 属性，因此无法使用您拥有的 HTML 标记和 CSS.[=16 来完成您想要完成的任务=]

第三个选项是使用 div 和 opacity 作为背景：

<div class="gradients"></div>
<div>Website content here</div>

html { height: 100%; }

body { min-height: 100%; position: relative; margin: 0; }

.gradients {
  background-image: url('left.jpg'), url('right.jpg');
  background-position: top left, top right;
  background-repeat: repeat-y;
  bottom: 0;
  left: 0;
  opacity: .5;
  position: absolute;
  top: 0;
  right: 0;
}

Codepen Link，用 CSS 渐变，因为我没有你的 JPG 资源，但效果是一样的。

多个透明背景图像

Multiple transparent background images

html

css

transparent

background-image

opacity