您现在的位置是：网站首页> 编程资料编程资料

使用css写带纹理渐变背景图的示例代码使用CSS cross-fade()实现背景图像半透明效果的示例代码完美解决webpack打包css背景图片路径问题CSS3为背景图设置遮罩并解决遮罩样式继承问题CSS设置div背景图的实现代码CSS背景图片设置的6个有趣的技巧CSS3 实现响应鼠标移动背景图片漂移效果的用户介绍卡片源码

2021-09-03 974人已围观

简介这篇文章主要介绍了使用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实现Div高度根据自适应宽度（百分比）调整css和css3弹性盒模型实现元素宽度（高度）自适应css 高度自适应的问题示例探讨CSS min-height IE6、IE7、FF下DIV自适应高度纯CSS无hacks的跨游览器自适应高度多列布局推荐css textarea 高度自适应,无滚动条CSS解决未知高度的垂直水平居中自适应问题CSS 实现高度自适应铺满整屏的实现

下一篇：解决flex布局space-between最后一行左对齐的方法flex弹性盒布局最后一行左对齐的实现思路css3 flex布局 justify-content:space-between 最后一行左对齐让CSS flex布局最后一行列表左对齐的N种方法(小结)

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢