Question

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

Answer 1

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

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

<div class="background1">
    <div class="background2">
        stuff
    </div>
</div>

Answer 2

是的，CSS3

使用CSS3 gradient调用来制作“非渐变”纯色将为您提供具有透明度功能的多种背景颜色。这里有两种纯色，50％透明度覆盖（see a fiddle）：

.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');
}

Answer 3

由于您可以拥有多个背景图像，因此可以考虑使用纯色图像作为背景和apply alpha to them。

css：多个半透明背景？

3 个答案:

是的，CSS3