CSS背景色在透明图像上

Question

我不知道如何将播放器图像上的背景颜色设置为蓝色。

我试过了：

CSS： background-color: transparent blue

这是页面的链接：

主页

有人可以指导我吗？ 我需要使用photoshop并将其设置为蓝色吗？

更新：

我指的只是带有播放器图标的图像。

Answer 1

将此添加到您的CSS：

.fancy_video img {
    background-color: #33d;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

仅对于IE9 +，如@showdev所建议的那样具有透明背景：

.fancy_video img {
    background-color: rgba(51,51,221,.5);
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

Answer 2

您不能同时具有背景图片和背景颜色的html元素（在CSS中）。 因此，完成目标操作的最简单方法是使用CSS中的不透明度或RGBA，使元素直接位于图像上方，并在其上具有蓝色。

例如：

[http://jsfiddle.net/wyj3oj93/]