Question

我正在建立一个网站，除了jquery-ui之外什么也没用。

好吧，在我的应用程序中，我需要在列表中每行交替显示颜色。现在所有行都只是.ui-widget-content的颜色。好吧，我可以在交替的行上应用一个没有问题的类，但我希望交替颜色是.ui-widget-header中背景颜色的非常透明的版本。除了html jquery和CSS，我怎么能用它？（我真的希望不必使用javascript来做这个小技巧）

Answer 1

最简单的方法是在Photoshop，Fireworks，GIMP，Kreta等中创建一个小的平面图像，并在那里设置颜色/不透明度。上述解决方案将允许透明，但它们是

1）不符合标准和

2）它们可能导致div中包含的文本也是透明的（通常是设计中的不良结果）。

所以......

.ui-widget-content-alt {
background: transparent url(images/my_80%transparent_black_bg.png) top left repeat;
}
.ui-widget-content {
background: transparent url(images/my_80%transparent_white_bg.png) top left repeat;
}

Answer 2

假设我没有误解您的问题，并且您可以为.ui-widget-content-alt等备用行使用单独的CSS类，您可能需要使用以下CSS：

.ui-widget-content, .ui-widget-content-alt {
    background-color: #000;
}

.ui-widget-content-alt {
    filter: alpha(opacity=20);
    opacity: 0.2;
}

opacity属性是不透明度值的CSS标准，适用于Firefox，Safari，Chrome和Opera。
过滤器属性适用于IE。

您可能需要查看以下文章，了解opacity属性与旧浏览器的兼容性：

CSS Tricks - CSS Transparency Settings for All Browsers

Answer 3

没有标准的方法。

您可以使用css opacity和fiter来实现它。

以下内容会为您提供80％黑色透明色

    .someClass { background-color:#000; -moz-opacity: 0.8; opacity:.80;filter: alpha(opacity=80);}

使用此选项会导致CSS无法通过合规性检查。

让课程的背景颜色透明吗？

3 个答案: