html - 透明RGBA渐变下的背景图

Question

我正在为一个网站设计标题。我正在尝试在页眉右侧使用一个图像，在其顶部使用渐变颜色，并将右侧的 rgba 设置为一定程度的透明度。单独显示图像并且渐变效果很好，但是图像和渐变不能一起工作，只有渐变显示透明色让白色透过，但没有图像。

这是我的代码。

.header-container {
    background: url('banner-background.PNG') right top no-repeat;
    background: rgb(86,0,0); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(86,0,0,1) 0%, rgba(126,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(126,0,0,0)), color-stop(100%,rgba(86,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Opera 11.10+    */
    background: -ms-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 */
}

Answer 1

您可以像下面的 CSS 那样执行此操作以组合背景图像和 CSS3 渐变:

.header-container {
  background: rgb(86,0,0); /* Old browsers */
  background: url('banner-background.PNG') right top no-repeat, -moz-linear-gradient(left,  rgba(86,0,0,1) 0%, rgba(126,0,0,0) 100%); /* FF3.6+ */
  background: url('banner-background.PNG') right top no-repeat, -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(126,0,0,0)), color-stop(100%,rgba(86,0,0,1))); /* Chrome,Safari4+ */
  background: url('banner-background.PNG') right top no-repeat, -webkit-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
  background: url('banner-background.PNG') right top no-repeat, -o-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Opera 11.10+    */
  background: url('banner-background.PNG') right top no-repeat, -ms-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* IE10+ */
  background: url('banner-background.PNG') right top no-repeat, linear-gradient(to right,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 */
}

[已编辑](背景图片上的渐变)

.header-container {
  background: rgb(86,0,0); /* Old browsers */
  background: -moz-linear-gradient(left, rgba(86,0,0,1) 0%, rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(126,0,0,0)), color-stop(100%,rgba(86,0,0,1))), url('banner-background.PNG') right top no-repeat; /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* Opera 11.10+    */
  background: -ms-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* IE10+ */
  background: linear-gradient(to right, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 */
}