网格

        html {
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;
}

具体效果见链接

波点

可以用如下代码来实现

background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

但如果我想实现如下效果而非上面那样中规中矩


其实原理是一样的

background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

具体效果见链接
需要注意的是第二层背景的偏移定位值必须是贴片宽高的一半

棋盘

html {
background: #eee;
background-image: linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
}
        html {
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px,
15px 15px, 30px 30px;
background-size: 30px 30px;
}

用以上两者中的任何一种都可以,其实实现的原理就类似于

具体效果见链接
其实用svg方式来实现棋盘效果会更简单

        html {
background: #eee url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\
<rect x="50" width="50" height="50" />\
<rect y="50" width="50" height="50" />\
</svg>');
background-size: 30px 30px;
}

效果与css实现一样,具体效果见链接
小诀窍:在svg方案中我们用来让一行css出现在多选,是因为出于可读性的考虑,需要把一句 CSS 代码打断为多行,只需要用反斜杠()来转义每行末尾的换行就可以了

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h12ajhabk2j

CSS揭秘之《背景图案》的更多相关文章

  1. CSS揭秘之多重边框&连续的图像边框

    1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...

  2. [读书笔记] CSS揭秘-背景与边框

    半透明边框 默认情况下,背景会延伸到边框所在的区域下层.可以通过background-clip属性调整该默认行为. border: 10px solid rgba(0,0,0,.2) backgrou ...

  3. [css 揭秘]:CSS揭秘 技巧(二):多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

  4. CSS揭秘—多重边框(二)

    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

  5. [css]《css揭秘》学习(二)-多重边框

    一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...

  6. CSS揭秘-半透明边框与多重边框

    场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为   解决方案: 使用backgroun ...

  7. css多重边框

    一.使用box-shadow实现多重边框 html <div class="multiple"></div> css .multiple{ backgrou ...

  8. [css 揭秘]:CSS揭秘 技巧(四):边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...

  9. [css 揭秘]:CSS揭秘 技巧(一):半透明边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...

  10. 【基础】CSS实现多重边框的5种方式

    简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求 ...

随机推荐

  1. Chrome:查看HTTP请求的header信息

    1.打开Google浏览器Chrome,通过F12进入开发者工具,进入Network模块下,此时由于我们还没有进行任何HTTP请求,所以这个页面下还是空空如也 2.随便通过某个搜索引擎搜索一下,比如通 ...

  2. PhpStudy代码执行后门

    0x00 概述 只需要两个参数 Accept-Encoding: gzip,deflate Accept-Charset: Base64编码(PHP代码) 0x01 利用代码 加群可以下载:87369 ...

  3. c# Winform中如何把图片添加到resources中

    我们在Winform项目中中需要插入图片资源,但是新建的项目中找不到Resources文件夹,怎么才能出现呢? 1:双击项目下的Resources.resx,出现视图 2:单击"添加资源&q ...

  4. Go基础知识梳理(二)

    Go基础知识梳理(二) 简单函数的定义 //有参数有返回值 func sum(a int, b int) int { return a + b } //无返回值 func sum(a int, b i ...

  5. elasticsearch的安装与使用

    1:官网进行下载 https://www.elastic.co/cn/elasticsearch/ 2:这里我用的是7.15.2 3:进行下载解压至d 盘 4:接下来我们cmd 切换目录进行运行 5: ...

  6. tp6微信公众号开发者模式自定义菜单

    1,参考上篇博客,获取access_token https://www.cnblogs.com/xiaoyantongxue/p/15803334.html 2:控制器写以下代码 /* * 获取普通a ...

  7. jmeter(二十八)利用beanshell进行多重断言

    在接口测试中,我们对返回结果的正确性判断一般是基于响应报文的返回内容进行断言.但有些时候,按照正常的业务逻辑来说,一个请求返回的内容是多种不同的. 比如:用户注册功能,注册成功是正常的返回messag ...

  8. tensorflow源码解析之framework-resource

    目录 什么是resource 如何使用resource 如何管理resource 常用resource 其它结构 关系图 涉及的文件 迭代记录 1. 什么是resource 我们知道,TF的计算是由设 ...

  9. 【面经】Python面试的16个高频问题

    (一)Python 是如何进行内存管理的? 答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制 ⒈对象的引用计数机制 Python 内部使用引用计数,来保持追踪内存中的对象,所有对 ...

  10. knative入门指南

    尽管Knative自2018年以来一直由社区维护,但最近一直有关于该项目的传言,因为谷歌最近将Knative提交给了云原生计算基金会(CNCF),作为一个孵化项目考虑. 太酷了!但Knative到底是 ...