多个透明背景图像

时间:2016-10-29 17:24:48

标签: html css3 background-image opacity transparent

我有两个背景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做这个?

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

我不确定这意味着什么:

  

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

答案 2 :(得分:0)

我可以想到几种方法:

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