⊙^⊙应用css写带纹路渐变色情况图的实例编码

2021-03-23 16:02 jianzhan

新项目中网页页面长短大约在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纹路渐变色情况图內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!