使用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写带纹理渐变背景图相关推荐

html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度. 网站中 ...
html 图片右侧空白,CSS缩小窗口时，背景图出现右侧空白
CSS让背景平铺的代码 repeat-x ,也就是沿着X方向重复下去(横向平铺): repeat-y (纵向平铺){ background-p_w_picpath: url 关于宽度自适应,已经是前段 ...
Css 如何使纯颜色/背景图自适应的铺满全屏
摘要他喵的我觉得一般就是三种需求: 1.纯颜色解释:即只有background-color,没有图需求:应至少充满一个视窗,如果内容超出一个视窗,自适应填充.比如知乎首页. 2.背景图需求很动 ...
CSS缩小窗口时，背景图出现右侧空白
缩小窗口时CSS背景图出现右侧空白BUG的解决方法(兼容各浏览器) 解决办法: 在css内加入如下两行代码,让它自己判断: width:expression(document.body.clientW ...
CSS实现兼容性的渐变背景(gradient)效果（转）
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=743 一.有点俗态 ...
html渐变不兼容,CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
一.有点俗态的开场白要是两年前,实现"兼容性的渐变效果"这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持 ...
jquery.qrcode生成带logo和背景图的二维码
效果图: <html lang="zh-cn"> <head> <title>jQuery生成二维码分享图片</title> < ...
1、2（HTML与CSS）.2.1 网站背景图
想要写的网站背景是这样的: https://www.quotery.com/ 它有几个特点: 1. 铺满整个屏幕 2. 当屏幕缩放时,图片会长宽一起缩放,而不是只随着屏幕缩放一条边,这样图片就不会变形 ...
css-怎么做半圆渐变背景图
做下面背景图有两种方式: <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...

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

使用css写带纹理渐变背景图相关推荐

最新文章

热门文章