当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Background image under transparent RGBA gradient

问题描述:

I'm designing the header for a web site. I'm trying to use an image on the right side of the header with a gradient color over the top of it with the rgba of the right side set to a level of transparency. Individually the image shows and the gradient works fine, but the image and the gradient do not work together, only the gradient shows up with the transparent color letting white show through, but no image.

Here is my code.

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

}

网友答案:

You could do this like below CSS to combine a background image and CSS3 gradients:

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

[EDITED] (Gradient over background image)

.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 */
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: