html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码

项目中页面长度大概在2000px以上，再加上背景图是带纹理和渐变的，所以加载起来会很大很耗费时间，所以就改用css实现了。

这个网站中有很多现成的背景，也可以自定义背景色，纹样的颜色和透明度。

网站中背景色是纯色，如果我们需要渐变背景，就可以把纹理的背景色设置为透明色，然后把父元素的背景图设置为渐变效果~

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纹理渐变背景图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码相关推荐

使用css写带纹理渐变背景图
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这次我们主要用到的网站是Hero Patterns--免费在线纹理素材库这 ...
html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果代码模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: content="width=device-width, user-scalable=no, init ...
html制作收货地址页面,css 收货地址平行四边形的线条样式示例代码
代码如下所示: // 收货地址的平行四边形的线条样式 //样式 .top{ background-color: #fff; position: relative; } .top:before{ pos ...
html做一页关于时间轴的网站,前端css实现最基本的时间轴的示例代码
本文介绍了前端css实现最基本的时间轴的示例代码,分享给大家,具体如下: 原型: 代码: 状态详情 #timeleft div { height: 65px; color: #333333; } #t ...
html input选中样式,CSS 伪类修改input选中样式的示例代码
注:该表引自W3School教程伪元素的分类及作用: 下面通过代码看下CSS 伪类修改input选中样式的示例代码,代码如下所示: 主要是用到了after伪类和字体符号. input{ -webki ...
html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...

html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码

html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码相关推荐

最新文章

热门文章