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 */
}

在透明RGBA梯度下的背景图像

1 个答案: