时间:2021-05-08
项目中页面长度大概在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纹理渐变背景图内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS3之前,必须依赖AdobePhotoshop等图形处理软件来制作渐变图,再以背景图片方式添加给元素。而现在,使用CSS就可以创造出各种渐变效果了。渐变是C
在我们写css样式背景图的时候通常会写一个备用色,正确写法。复制代码代码如下:background:url("a.jpg")no-repeat#ccc;如果不写
本文实例讲述了CSS基于单张背景图实现自适应宽度的圆角菜单效果代码。分享给大家供大家参考。具体如下:这是一款基于单张背景图片实现的CSS圆角菜单,菜单项的背景可
CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在HTML之上。CSS允许应用纯色作为背景,也允许使用背景图像创建相当
Word饼图看上去很单调,想要给饼图设置背景图片,该怎么设置呢?下面我们就来看看给饼图添加渐变色背景图的教程。软件名称:Office2016专业增强版中文免费正