CSS斑马条纹背景

傷城~ 2022-03-02 14:28 309阅读 0赞

最近的一道面试题：css实现斑马条纹背景。

▍效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70][]

▍源码

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.container {
    				display: flex;
    				flex-wrap: wrap;
    				justify-content: space-around;
    				align-content: space-around;
    				width: 1000px;
    				height: 900px;
    			}
    			
    			.bg {
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				width: 300px;
    				height: 200px;
    				color: white;
    				font-size: 36px;
    			}
    			
    			/*渐变*/
    			.bg-first {
    				/**
    				 * 0-20%为#cc95c0，20%-80%为#cc95c0到#7aa1d2的渐变，80%-100%为#7aa1d2
    				 */
    				background: linear-gradient(#cc95c0 20%, #7aa1d2 80%);
    			}
    			
    			/*分割*/
    			.bg-second {
    				/**
    				 * 0-50%为#cc95c0，50%-100%为#7aa1d2
    				 */
    				background: linear-gradient(#cc95c0 50%, #7aa1d2 50%);
    			}
    			
    			/*斑马条纹*/
    			.bg-third {
    				background: linear-gradient(#cc95c0 50%, #dbd4b4 50%);
    				background-size: 100% 40px;
    			}
    			
    			/*三色斑马条纹*/
    			.bg-fourth {
    				/**
    				 * 100% ÷ 3 = 33.3%
    				 */
    				background: linear-gradient(#cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);
    				background-size: 100% 40px;
    			}
    			
    			/*竖向双色斑马条纹*/
    			.bg-fifth {
    				background: linear-gradient(to right, #cc95c0 50%, #dbd4b4 0);
    				background-size: 40px 100%;
    			}
    			
    			/*竖向三色斑马条纹*/
    			.bg-sixth {
    				/**
    				 * 100% ÷ 3 = 33.3%
    				 */
    				background: linear-gradient(to right, #cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);
    				background-size: 40px 100%;
    			}
    			
    			/*斜向双色斑马条纹*/
    			.bg-seventh {
    				/**
    				 * 50% ÷ 2 = 25%
    				 */
    				background: linear-gradient(45deg, #cc95c0 25%, #dbd4b4 0, #dbd4b4 50%, #cc95c0 0, #cc95c0 75%, #dbd4b4 0);
    				background-size: 40px 40px;
    			}
    			
    			/*斜向三色斑马条纹*/
    			.bg-eighth {
    				/**
    				 * 50% ÷ 3 = 16.66%
    				 */
    				background: linear-gradient( 45deg, #cc95c0 0, #cc95c0 16.66%, #dbd4b4 16.66%, #dbd4b4 33.33%, #7aa1d2 33.33%, #7aa1d2 50%, #cc95c0 50%, #cc95c0 66.66%, #dbd4b4 66.66%, #dbd4b4 83.33%, #7aa1d2 83.33%, #7aa1d2);
    				background-size: 40px 40px;
    			}
    			
    			/*repeating-linear-gradient虚化斑马条纹*/
    			.bg-ninth {
    				background: #cc95c0;
    				background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 15px, transparent 0, transparent 30px);
    			}
    			
    			/*repeating-linear-gradient斜向双色条纹*/
    			.bg-tenth {
    				background: repeating-linear-gradient(45deg, #cc95c0, #cc95c0 15px, #dbd4b4 0, #dbd4b4 30px);
    			}
    			
    			/*鳞片式三角条纹*/
    			.bg-eleventh {
    				background: linear-gradient(45deg, #cc95c0 50%, #dbd4b4 0);
    				background-size: 40px 40px;
    			}
    			
    			/*十字格条纹*/
    			.bg-twelveth {
    				background-image: linear-gradient(0deg, rgba(200, 0, 0, .5) 50%, transparent 50%), linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%);
    				background-size: 40px 40px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="container">
    			<div class="bg bg-first">示例一</div>
    			<div class="bg bg-second">示例二</div>
    			<div class="bg bg-third">示例三</div>
    			<div class="bg bg-fourth">示例四</div>
    			<div class="bg bg-fifth">示例五</div>
    			<div class="bg bg-sixth">示例六</div>
    			<div class="bg bg-seventh">示例七</div>
    			<div class="bg bg-eighth">示例八</div>
    			<div class="bg bg-ninth">示例九</div>
    			<div class="bg bg-tenth">示例十</div>
    			<div class="bg bg-eleventh">示例十一</div>
    			<div class="bg bg-twelveth">示例十二</div>
    		</div>
    	</body>
    
    </html>

▍参考文章

[Css实现斑马条纹背景][Css]、[css斜条纹背景——linear-gradient][css_linear-gradient]、[css斑马条纹背景][css]、[CSS图像绘制之：条纹背景][CSS]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220302/73fb03a68d834e788e12295212ac1366.png
[Css]: https://www.jianshu.com/p/22d88eafec77
[css_linear-gradient]: https://blog.csdn.net/u013344993/article/details/80936695
[css]: https://blog.csdn.net/TanMengyi/article/details/88222441
[CSS]: https://blog.csdn.net/majun0007/article/details/55002693