如何在css3渐变效果下添加背景图像具有低不透明度

时间:2014-09-10 21:51:23

标签: html css css3

我的Photoshop设计有渐变色,有64个不透明度,它有模式我已经成功做渐变和低不透明度像我在主题中的代码示例但我的问题是我如何添加到它的模式

display: block;
position: relative;
width:100%;
height:100%;
background: rgba(137,206,157,1);
background: -moz-linear-gradient(top, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(137,206,157,1)), color-stop(100%, rgba(74,187,154,0.64)));
background: -webkit-linear-gradient(top, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
background: -o-linear-gradient(top, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
background: -ms-linear-gradient(top, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
background: linear-gradient(to bottom, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89ce9d', endColorstr='#4abb9a', GradientType=0 );

1 个答案:

答案 0 :(得分:0)

1) #your box {
background-image: url('XX.gif');
/* here your code /*
}

2) 
<div id="box">
<div id="your_box">
</div>
</div>


#box {
background-image: url('XX.gif'); /* or put here a css3 grandient effect instead
background-color: #XY;
display: block;
position: relative;
width:100%;
height:100%;
overflow:hidden;
}

#box #your_box {
here your code
}