11
2019
04

CSS实现棋盘背景效果

棋盘图案在很多场景下都会用到。比如说,相对于单调的纯色背景来说,具有细微对比度的棋盘图案可能就是一个有趣的替代品。在各种应用程序的界面中,灰色的棋盘图案已经是用于表示透明色的事实标准

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
#tt{
  width:200px;
  height: 70px;
  background:#eee;
  background-image: linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0),linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0);
  background-size: 30px 30px;
  background-position: 0 0 ,15px 15px;
}  
</style>
	</head>
	<body>
<div id="tt"></div>
	</body>
</html>

效果图:

原文链接:https://www.qiquanji.com/post/8000.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。