使用CSS制作黑白格背景的思路是什么
Admin 2022-11-01 群英技术资讯 467 次浏览
在页面上,有时会需要展示一些透明背景的图片,为了展示其透明的背景,通常会像PS一样,使用黑白相间的格子组成背景,从而告诉用户,这是一张透明的图片。
1.利用渐变(background: linear-gradient())的效果来实现黑白相间,如下代码:
<style> #app { width: 200px; height: 200px; background: linear-gradient( rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4) 100% ) } </style> </head> <body> <div id="app"></div> </body>
效果:
2.然后加以旋转,使渐变背景倾斜,代码:
#app { width: 200px; height: 200px; background: linear-gradient( 45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4) 100% ); }
效果:
3.然后设置背景大小,并且使其自动平铺填充background-repeat:repeat;, 因为默认就是平铺,所以不用特地设置这个值,只需设置背景大小即可:
#app { width: 200px; height: 200px; background: linear-gradient( 45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4) 100% ); background-size: 20px 20px; }
效果:
4.通过以上操作,发现基本实现了一半的效果,毕竟需求是方格,而不是三角形,那么每个格子只需要再来一个三角形即可,为了方便区分,另一个颜色先设置为red:
#app { width: 200px; height: 200px; background: linear-gradient( 45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4) 100% ), linear-gradient( 45deg, red 25%, transparent 25%, transparent 75%, red 75%, red 100% ); }
效果:
5.可以看到,两种渐变重叠在一起,这时候需要分别设置两种渐变起始位置,使其分开,为了实现这个效果,将红色渐变的起始位置向左、向下平移背景大小一半的距离:
#app { width: 200px; height: 200px; background: linear-gradient( 45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4) 100% ), linear-gradient( 45deg, red 25%, transparent 25%, transparent 75%, red 75%, red 100% ); background-position: 0 0, 100px 100px; }
效果:
6.到此为止,已经实现我们需要效果了,接下来只需要将红色设置为灰色,然后设置背景的大小,将背景平铺即可,完整代码如下:
#app { width: 200px; height: 200px; background: linear-gradient( 45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4) 100% ), linear-gradient( 45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4) 100% ); /* 背景大小必须小于盒子的大小 */ background-size: 20px 20px; /* 第二种渐变的偏移必须为为背景大小的一半 */ background-position: 0 0, 10px 10px; }
效果:
至此,黑白格背景效果实现完毕。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍css的inherit继承属性的内容,对大家学习和理解inherit继承属性有一定的帮助,感兴趣的朋友可以参考,希望大家阅读完这篇文章能有所收获,接下来小编带着大家一起了解看看。
这篇文章给大家分享的是用CSS3实现毛玻璃效果的内容,小编觉得挺实用的,能使得页面很生动,美化网页,因此分享给大家做个参考,文中示例代码介绍的很详细,感兴趣的朋友接下来一起跟随小编看看吧。
这篇文章主要介绍了CSS清除图片下几像素空白间隙的方法 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
本篇文章给大家带来的内容是关于什么是canvas离屏技术?canvas放大镜效果如何实现?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
css中outline方法的使用:1、如果只需要两层边框,可以选择先设置一层常规边框,再加上outline(描边)属性来生成外层边框。2、outline-offset属性可以控制边缘和元素边缘之间的间距,该属性可以接受负值。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008