CSS斑马条纹背景

最新推荐文章于 2024-03-01 14:21:53 发布

门时

最新推荐文章于 2024-03-01 14:21:53 发布

阅读量1.3k

点赞数 2

分类专栏：前端开发

本文链接：https://blog.csdn.net/i_dont_know_a/article/details/88695201

版权

前端开发同时被 2 个专栏收录

46 篇文章 4 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

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

▍效果

▍源码

<!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斜条纹背景——linear-gradient、css斑马条纹背景、CSS图像绘制之：条纹背景

门时

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS斑马条纹背景

最近的一道面试题：css实现斑马条纹背景。▍效果▍源码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .container { display: fl...
复制链接

扫一扫

专栏目录