使用css写带纹理渐变背景图的案例

本文将为大家详细介绍“使用css写带纹理渐变背景图的案例”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“使用css写带纹理渐变背景图的案例”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

项目中页面长度大概在2000px以上，再加上背景图是带纹理和渐变的，所以加载起来会很大很耗费时间，所以就改用css实现了。

这次我们主要用到的网站是Hero Patterns——免费在线纹理素材库

这个网站中有很多现成的背景，也可以自定义背景色，纹样的颜色和透明度。

网站中背景色是纯色，如果我们需要渐变背景，就可以把纹理的背景色设置为透明色，然后把父元素的背景图设置为渐变效果~

html,body{
  background: #000;
  min-width: 1024px; 
  background-image: linear-gradient(to right, #000 -6%, #703ccc, #000 110%);
}

.Diffuse{
    min-width: 1024px;
    height: auto;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.61' fill-rule='evenodd'%3E%3Cpath d='M5 0h2L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    }

好了，接下来就大功告成啦~

如果你能读到这里，小编希望你对“使用css写带纹理渐变背景图的案例”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注亿速云行业资讯频道！