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渐变。这些jpegs有数百种颜色，比任何CSS Gradient都可以制作更丰富的渐变。

我已经看过通过在其前面或后面添加不透明度div来使单个背景图像透明的方法。当我有两张背景图片时，我如何为我的.gradient div做这个？

Answer 1

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

由于您不能简单地将opacity提供给gradients div，这也会影响网站内容，您可以使用这样的伪元素，这不会影响网站内容< / p>

.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 2

我不确定这意味着什么：

这些jpegs有数百种颜色，比任何CSS Gradient都可以提供更丰富的渐变。

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

但是，由于您已经要求对此进行排除，我建议使用24位PNG而不是JPG。 24位PNG具有Alpha透明度通道，可让您完全控制它们的整体透明度以及每像素的透明度。此时没有background-transparency属性，因此您尝试完成的内容无法使用您拥有的HTML标记和CSS。

第三个选项是为您的背景设置一个空{div opacity div：

<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资产，但效果是一样的。

Answer 3

我可以想到几种方法：

您应该将它们放在单独的div中，并将这些div放在主容器/包装器下面。你可以相应地定位它们。
您可以使用允许透明度渐变的实际.png图像
您可以使用已在同一文件中同时具有渐变和所需bg颜色的背景图像。然后你可以把它变成背景重复：repeat-y;和background-size：包含。

多个透明背景图像

3 个答案: