透明RGBA梯度下的背景图像
透明RGBA梯度下的背景图像
提问于 2014-09-06 22:39:53
我在为一个网站设计标题。我试图在标题的右侧使用一个图像，其顶部是渐变颜色，右侧的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 */
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-06 22:52:10
您可以在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 */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25705431
复制相关文章
相似问题
腾讯云开发者
