如何通过css设置不透明度的背景颜色？答案

【问题标题】：How to set background color with opacity by css?如何通过css设置不透明度的背景颜色？
【发布时间】：2014-06-11 00:15:59
【问题描述】：

我正在尝试像这个网站一样设置背景菜单颜色（下拉菜单）： http://www.artofplacement.com/wordpress/ 但我不能选择颜色代码。我猜它的蓝色但不透明。如何设置不透明度较低的背景颜色，例如参考站点下拉菜单？我只想从中复制相同的菜单 css http://www.artofplacement.com/wordpress/ 到我的网站。我会将我的工作站点放在 cmets 中。

但我无法从下拉菜单中复制背景颜色。

查看此站点：artofplacement.com/wordpress，当您将鼠标移至 Room 时，您会看到红色背景颜色和下拉列表，请注意，在您将鼠标移至其他菜单之前，红色背景是粘性的。我需要这个粘稠的红色。你能帮助我吗？

提前致谢。

【问题讨论】：

这是我的工作站点：artofplacement.com/avada
background: rgba(163,192,246,0.6);
它工作正常。但是J.K给出的代码更好。谢谢@mdesdev
查看此站点：artofplacement.com/wordpress，当您将鼠标移至 Room 时，您会看到一个红色的背景颜色和一个下拉列表，请注意，红色背景是粘性的，直到您将鼠标移到其他菜单。我需要这个粘稠的红色。你能帮帮我吗？

标签： html css wordpress opacity

【解决方案1】：

试试这个颜色，我与那个示例网站完全匹配...... 根据需要更改字体颜色。背景颜色：rgba(164, 191, 246, 0.6); 要么背景：RGBA（164、191、246、0.6）；要么颜色：rgba(164, 191, 246, 0.6);

【讨论】：

当显示 dropwoen 列表时，您能帮我设置主菜单的活动背景颜色吗？只需检查示例站点。现在它显示了，但在鼠标移到下拉列表后立即移动。我需要那种悬停颜色粘性，直到我将鼠标移到其他菜单。谢谢。
查看此站点：artofplacement.com/wordpress，当您将鼠标移至 Room 时，您会看到红色背景颜色和下拉列表，请注意，红色背景是粘性的，直到您将鼠标移出其他菜单。我需要这个粘稠的红色。你能帮帮我吗？

【解决方案2】：

为您的下拉菜单 css 悬停效果添加广告：

background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #ff0000 0%,#a60000 100%);
    background-image: -moz-linear-gradient(top, #ff0000 0%,#a60000 100%);
    background-image: -o-linear-gradient(top, #ff0000 0%,#a60000 100%);
    background-image: -ms-linear-gradient(top, #ff0000 0%,#a60000 100%);
    background-image: linear-gradient(top, #ff0000 0%,#a60000 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;

工作演示：DEMO 另一个演示：DEMO2

【讨论】：

我正在寻找纯色的代码。您建议使用背景图像，为什么不建议使用背景颜色？谢谢@Cosmos
因为您的示例中的渐变具有悬停效果
我正在寻找下拉菜单 bg 代码的代码，而不是菜单悬停代码。谢谢@Cosmos