我有两个背景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做这个?
答案 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)
我可以想到几种方法: