纯CSS 格子背景

javascript 文章 2022-07-15 14:27 628 0 全屏看文

AI助手支持GPT4.0

本文简介

点赞 + 收藏 + 关注 = 学会了


这次会使用css画出一个格子背景。并且一步步分析如何实现~

file

思路

直接给答案:通过2个相等的直角三角形拼接,形成一个正方形。


三角形可以使用 background-image 的渐变来实现。

html,body {  margin: 0;  width: 100%;  height: 100%;}body {  background-image: linear-gradient(45deg, #000 25%, transparent 0);}

file

此时出来的效果如上图所示。

做一个45度的线性渐变,第一个颜色是#000(黑色),占整个背景贴片的25%,其余部分都是红色。


在上面的基础上,用 background-size 来控制背景贴片的大小。

body {  background-image: linear-gradient(45deg, #000 25%, transparent 0);  background-size: 200px 200px;}

file

开始有点想法了吗?

此时如果我们再画多一个反过来的黑色的直角三角形,拼在一起不就成了正方形了吗?


反过来的三角形怎么画呢?我尝试将黑色从 25% 改成 75%,会得到以下效果

body {  background-image: linear-gradient(45deg, #000 75%, transparent 0);  background-size: 200px 200px;}

file

可以看到红色的三角形就是原本黑色三角形反过来的样子。

把上图的“白色三角形”变成黑色,原本的黑色三角形(25%)继续保留。

于是我又加多层渐变~

body {  background-image:    linear-gradient(45deg, #000 25%, transparent 0),    linear-gradient(45deg, transparent 75%, #000 0);  background-size: 200px 200px;}

file


简化一下代码:

body {  background-image: linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);  background-size: 200px 200px;   }

最后再做多一层上面的效果,然后移动一下其中一层的位置,就可以合并成一个黑色正方形。

body {  background-image:    linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),    linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);  background-position: 0 0, 100px 100px;  background-size: 200px 200px;}

file

大功告成。


最后需要提醒的是,在本例中 background-position 第二个渐变的位移是 background-size 的一半,这样就能实现这种格子背景了~

完整代码

<style>  html,  body {    margin: 0;    width: 100%;    height: 100%;  }  body {    background-image:      linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),      linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);    background-position: 0 0, 100px 100px;    background-size: 200px 200px;  }</style>

这是做成背景的完整代码。

推荐阅读

👍《CSS里的ch到底是什么东西?》

👍《给console来的样式》

👍《如何用 CSS 选择符杀死队友》

👍《这18个网站能让你的页面背景炫酷起来》

👍《纯CSS:动态渐变背景【一分钟学会】》

👍《纯css实现117个Loading效果》

点赞 + 关注 + 收藏 = 学会了

-EOF-

AI助手支持GPT4.0


国内超级便宜服务器

摸鱼人热门新闻聚合

钻级赞助商 我要加入

开发者在线工具

第三方支付技术请加QQ群

相关文章
纯CSS 格子背景
使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 ?
【微信小程序】【可重用代码】基于数据库时间实现商品倒计时
模拟Vue实现响应式数据
博客园美化教程
随便看看
BT面板查看网站入口、账号密码的命令 6009
ucloud海外服务器超级优惠券 3275
根据您的消费情况,您的延停权益已发生变化,变更后的延停权益为延停额度20.00元 5831
为什么我们喜欢迈克尔杰克逊。 4164
阿里云com、cn域名续费优惠码(2020年5月可用) 3587
阿里云com、cn域名续费优惠码(2020年6月可用) 3609
微信公众号开五联增值税发票怎么处理 2950
仙之侠道幻彩衣的合成和属性预览 4316
仙之侠道2.8四象玉的合成和图片属性预览 3950
仙之侠道2.8赤狱战甲合成和属性预览 3267