1

我可以制作半透明背景，但有没有办法为一个元素添加多个半透明背景？还是我需要自己乘以这些值（如果我需要自己乘以这些值，您会建议什么公式？）并设置一种背景颜色？

您可以设置多个背景图像...

4

3 回答 3

4

您只能为元素设置一种背景颜色。

我建议您组合所需的值并将计算的值放入 css 文件中，但如果这不起作用，另一种选择是创建一组嵌套元素并为每个元素设置背景颜色。例如

<div class="background1">
    <div class="background2">
        stuff
    </div>
</div>
于 2012-07-26T14:58:59.773 回答
2

是的，使用 CSS3

使用 CSS3gradient调用来制作“非渐变”纯色将为您提供具有透明度功能的多种背景颜色。这是覆盖 50% 透明度的两种纯色（参见小提琴）：

.layeredBkg {
    background-image: -o-linear-gradient(left , rgba(46,227,255.5) 0%, rgba(46,227,255,.5) 100%), -o-linear-gradient(left , rgba(196,48,255.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: -moz-linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), -moz-linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: -webkit-linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), -webkit-linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: -webkit-gradient(linear,left top, right top, color-stop(0, rgba(46,227,255,.5)), color-stop(1, rgba(46,227,255,.5))), -webkit-gradient(linear,left top, right top, color-stop(0, rgba(196,48,255,.5)), color-stop(1, rgba(196,48,255,.5)));
    background-image: -ms-linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), -ms-linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#882ee3ff', endColorstr='#882ee3ff'), progid:DXImageTransform.Microsoft.gradient(startColorstr='#88c430ff', endColorstr='#88c430ff');
}
于 2012-07-26T15:59:45.263 回答
0

由于您可以拥有多个背景图像，因此考虑使用纯色图像作为背景并将alpha 应用于它们。

于 2012-07-26T15:31:36.117 回答