ps如何做出纸质纹理

使用伪元素模拟纹理效果

我们可以利用 CSS 的伪元素 :before 和 :after 来模拟出纸质的纹理效果，这样可以让网页更加贴近真实的感觉。

    .paper:before {
        content: "";
        position: absolute;
        top: -30px;
        right: -30px;
        width: 150px;
        height: 150px;
        transform: rotate(45deg);
        background-color: rgba(0,0,0,.1);
    }

    .paper:after {
        content: "";
        position: absolute;
        bottom: -50px;
        left: -50px;
        width: 250px;
        height: 250px;
        transform: rotate(45deg);
        background-color: rgba(0,0,0,.1);
    }
    

使用纹理图片

我们也可以采用纹理图片的方式来实现纸质纹理效果，这样能够更好地控制纹理的样式和效果。

    .paper {
        background: url(paper-texture.jpg);
    }
    

使用 Canvas 绘制纹理效果

使用 HTML5 的 Canvas 绘制纹理效果是一种更加灵活的方式，我们可以根据自己的需求来绘制出不同风格的纸质纹理。

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var imgData=ctx.createImageData(canvas.width, canvas.height);

    for (var i=0; i < imgData.data.length; i +=4) {
        var grayScale=Math.floor(Math.random() * 256);
        imgData.data[i]=grayScale;
        imgData.data[i+1]=grayScale;
        imgData.data[i+2]=grayScale;
        imgData.data[i+3]=255;
    }

    ctx.putImageData(imgData, 0, 0);
    

总结

以上是三种实现纸质纹理效果的方法，我们可以根据需要选择合适的方式来实现我们想要的效果。