html - 如何淡化渐变、图像或纹理作为背景？

Question

对 css 和 html 以及使用 html5/css3 页面非常陌生。

如何应用类似于以下的渐变或图像(是图像还是纹理)并相应地在页面上淡化？

我一直在尝试类似的渐变，但似乎只适用于颜色，而不适用于网格/格栅效果。

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));  

谢谢

Answer 1

使用这段代码，

    <div class="grilleLayer"><div>

    .grilleLayer
    {
        width:100%;
        height:700px;
    background:url('http://s8.postimg.org/90qdtbn1t/temp.png') repeat scroll left top; 
    }


    body
    {
    background: #e0e5e1; /* Old browsers */
    background: -moz-linear-gradient(left, #e0e5e1 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e0e5e1), color-stop(100%,#ffffff));         /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #e0e5e1 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #e0e5e1 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #e0e5e1 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to right, #e0e5e1 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e5e1', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
    }

这里是 Fiddle !

或

你可以生成你想要的渐变色HERE