期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

css网格背景效果

1、【桌布效果】

把多个渐变图案组合起来,让它们透过彼此的透明区域显现时,就会形成各种网格。例如,把水平和垂直的条纹叠加起来,得到桌布图案

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  	.cc{  	width: 200px;      height: 70px;      background: white;      background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);      background-size: 30px 30px;  	}	  		</style>  	</head>  	<body>  		<div class="cc"></div>  	</body>  </html>

2、【图纸辅助线】

  某些情况下,希望网格中每个格子的大小可以调整,而网格线条的粗细同时保持固定。例如,类似图纸辅助线的网格

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  	.cc{  	 width: 200px;      height: 70px;      background: #58a;      background-image: linear-gradient(90deg,white 1px, transparent 0),linear-gradient(white 1px, transparent 0);      background-size: 30px 30px;  }	  		</style>  	</head>  	<body>  		<div class="cc"></div>  	</body>  </html>

3、【蓝图网格】

  甚至可以把两幅不同线宽、不同颜色的网格图案叠加起来,得到一个更加逼真的蓝图网格

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  	.cc{  	width: 200px;      height: 70px;      background: #58a;      background-image: linear-gradient(90deg,white 2px, transparent 0),linear-gradient(white 2px, transparent 0),linear-gradient(90deg,hsla(0,0%,100%,0.3) 1px, transparent 0),linear-gradient(hsla(0,0%,100%,0.3) 1px, transparent 0);      background-size: 75px 75px,75px 75px,15px 15px,15px 15px;  }  		</style>  	</head>  	<body>  		<div class="cc"></div>  	</body>  </html>

4、波点背景

【圆点阵列】

  前面,一直在用线性渐变生成图案。但是,径向渐变同样也是非常实用的,因为它允许创建圆形、椭圆,或是它们的一部分。径向渐变能够创建的最简单的图案是圆点阵列

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  	.cc{      width: 200px;      height: 70px;      background: #655;      background-image: radial-gradient(tan 30%,transparent 0);      background-size: 30px 30px;  }  		</style>  	</head>  	<body>  		<div class="cc"></div>  	</body>  </html>

【波点图案】

  可以生成两层圆点阵列图案,并把它们的背景定位错开,这样就可以得到真正的波点图案

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  	.cc{	      width: 200px;      height: 70px;      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;  }  		</style>  	</head>  	<body>  		<div class="cc"></div>  	</body>  </html>

棋盘背景

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

css

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-size: 30px 30px;    background-position: 0 0 ,15px 15px,15px 15px,30px 30px;

这段代码还可以稍稍优化,可以把这些处在贴片顶角的三角形两两组合起来(即把第一组和第二组合并为一层渐变,把第三组和第四组合并为一层渐变),然后还可以把深灰色改成半透明的黑色——这样只需要修改底色就可以改变整个棋盘的色调,不需要单独调整各层渐变的色标了 

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;

下面来使用SASS的mixin来简化代码

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  	.cc{	      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 class="cc"></div>  	</body>  </html>

【SVG】

  这样的代码量不能算少,所以转到SVG方案可能是更好的选择 

  可能有人会说,CSS渐变可以节省HTTP请求。但实际上,可以把SVG文件以dataURL的方式内嵌到样式表中

  [注意]SVG中的标签的属性值一定要添加引号,否则通过dataURL的方式引入的SVG文件无法显示成功

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  	.cc{	       height: 100px;      width: 100px;      background: url('data:image/svg+xml,\      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">\        <defs>\          <pattern id="pattern1" width="0.2" height="0.2" >\            <rect x="10" width="10" height="10"/>\            <rect y="10" width="10" height="10"/>\          </pattern>]\        </defs>\        <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)"/>\      </svg>');  }  		</style>  	</head>  	<body>  		<div class="cc">  		<svg xmlns="http//www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">    <defs>      <pattern id="pattern1" width=0.2 height=0.2 >        <rect x="10" width="10" height="10"/>        <rect y="10" width="10" height="10"/>      </pattern>    </defs>     <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)" />  </svg>  </div>  	</body>  </html>

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

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册