gpt4 book ai didi

html - 多个透明背景图像

转载 作者:太空宇宙 更新时间:2023-11-04 02:08:04 25 4
gpt4 key购买 nike

我有两个背景 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 执行此操作?

最佳答案

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

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

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

关于html - 多个透明背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40321686/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com