html - 如何使用彩色渐变使搜索栏背景透明

Question

我正在尝试制作一个具有透明背景的搜索栏，以便仍然显示父级的图像，但我想在其上添加一个不同的颜色层，并让图像在背景中仍然暗淡显示。

标签： htmlcss

Answer 1

您可以像这样使用背景颜色的 alpha 值

#searchbar{
    /*some other code like positioning*/
    background-color: rgba(255,0,0,0.5);
}

我这里有暗红色的例子。您可以在前 3 个参数中以 RGB 值给出您想要的任何颜色，第 4 个参数是 alpha 值，即透明度值。

值越大，颜色为不透明，值越小，背景为透明。最大值将为 1（完全不透明），最小值为 0（完全透明）。