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

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)));  

THX

Answer 1

可以使用包装div上的辅助渐变来实现网格效果，具有非常小的色彩停止。 Here's an example of that：

body
{
    background: linear-gradient(135deg, rgba(0,0,0,0.65) 0,rgba(0,0,0,0) 1px);
    background-size: 2px 2px;
}

我坚持使用小纹理，并使用CSS渐变作为主背景，因为你对纹理图像的控制比对CSS渐变的控制更多（特别是那些你想要通常需要的图案像素完美）。

Answer 2

使用此代码，

    <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