使班级的背景颜色透明？答案

【问题标题】：Make a class' background color transparent?使班级的背景颜色透明？
【发布时间】：2012-12-28 15:24:24
【问题描述】：

我正在制作一个只使用 jquery-ui 进行主题化的网站。

好吧，在我的应用程序中，我需要在列表中的每行交替使用颜色。现在所有的行都是.ui-widget-content 的颜色。好吧，我可以毫无问题地在交替行上应用一个类，但我希望交替颜色成为.ui-widget-header 中背景颜色的非常透明的版本。除了 html jquery 和 CSS，我将如何做到这一点？（我真的希望不必使用 javascript 来完成这个小技巧）

【问题讨论】：

定义透明。我猜你的意思不是“透明”，而是“比”更轻。
好吧，看穿是的。因为如果ui-widget-content 背景颜色是黑色，我希望它更暗，如果背景颜色是白色，我希望它更亮。
只是语义问题，但我建议对不可见使用“透明”，对 1 到 99 之间的不透明度（或透视）使用 半透明。我认为它可以更好地传达您要完成的工作。

标签： css jquery-ui transparency

【解决方案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;
}

【讨论】：

伙计，这太棒了，也是个好主意。如果我能做到这一点，我会接受它，但我很确定我能做到。
等等，其实我不确定...我忘记了透明度在图片中是如何起作用的...嗯...
我知道如何制作这样的东西，我的意思是我忘记了你必须实际设置一个透明的颜色。就像你不能只选择一个透明度值，就像opaque会工作。请注意，ui-widget-content 是一个自动生成的 css 类，我不能只修改它。
即使类是自动生成的，你也应该没问题。在这个解决方案中，您并没有弄乱 javascript，您只是在更改 CSS 并上传背景图像以供 CSS 抓取......只需创建一个 10x10 像素的纯黑色或纯白色图像并在 Photoshop 中设置它的不透明度。 “左上重复”确保它将拉伸 DIV 的整个宽度和高度。
好的，我明白了.. 你只需要像alternating-row div{} 那样做一些事情，其中包含背景透明图像。并在现有背景颜色的黑/白情况下将图像应用到两行（黑/白交替）。

【解决方案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

【讨论】：

我的问题是它往往使文本也变得透明且难以阅读......嗯......我不太确定如何做到这一点

【解决方案3】：

没有标准的做法。

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

类似下面的东西会给你80%的黑色透明色

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

使用它会导致您的 CSS 无法通过合规性检查。

【讨论】：