使用css写带纹理渐变背景图的示例代码_CSS

上一篇: CSS3 :not()选择器实现最后一行l... 下一篇:CSS3点击按钮实现背景渐变动画效...

使用css写带纹理渐变背景图的示例代码

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了使用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 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    }

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

在这里插入图片描述

到此这篇关于使用css写带纹理渐变背景图的示例代码的文章就介绍到这了,更多相关css纹理渐变背景图内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的使用css写带纹理渐变背景图的示例代码全部内容，希望文章能够帮你解决使用css写带纹理渐变背景图的示例代码所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: CSS3 :not()选择器实现最后一行l... 下一篇:CSS3点击按钮实现背景渐变动画效...

猜你在找的CSS相关文章