使用css写带纹理渐变背景图的示例代码
发布时间：2020-07-20 14:34:01 作者：仙女爱吃鱼 
我要评论
我要评论这篇文章主要介绍了使用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 cross-fade()实现背景图像半透明效果的示例代码
这篇文章主要介绍了使用CSS cross-fade()实现背景图像半透明效果的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
这篇文章主要介绍了完美解决webpack打包css背景图片路径问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-01
这篇文章主要介绍了CSS3为背景图设置遮罩并解决遮罩样式继承问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2020-06-22- 这篇文章主要介绍了CSS设置div背景图的实现代码，代码简单易懂，非常不错，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-14
这篇文章主要介绍了CSS背景图片设置的6个有趣的技巧,本文通过截图实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-12
CSS3 实现响应鼠标移动背景图片漂移效果的用户介绍卡片源码
这是一款基于CSS3 实现响应鼠标移动背景图片漂移效果的用户介绍卡片源码。画面背景默认显示一副男孩的信息介绍卡片，卡片带有图文介绍、图标链接，以及背景悬浮阴影效果。2020-05-06
最新评论