css3背景图案

最新推荐文章于 2024-07-18 10:04:43 发布

zbailing

最新推荐文章于 2024-07-18 10:04:43 发布

阅读量343

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/zbailing/article/details/52837486

版权

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style>
		.pattern1{
			width: 500px;
			height: 500px;
			background-color: rgba(229, 68, 109, 0.29);
			background: -webkit-radial-gradient(rgba(129, 211, 167, 0.51) 10px, transparent 10px),
		  -webkit-repeating-radial-gradient(rgba(129, 211, 167, 0.31) 5px, rgba(129, 211, 167, 0.31) 7px, transparent 10px, transparent 24px);
			background-size: 50px 50px, 100px 100px;
		}
		.pattern2{
			width: 500px;
			height: 500px;
			background-color: rgba(229, 68, 109, 0.29);
			background: linear-gradient(rgba(234, 146, 197, 0.51) 5px,transparent 5px, transparent 30px),
			linear-gradient(90deg, rgba(234, 146, 197, 0.51) 5px,transparent 5px, transparent 30px);
			background-size: 45px 45px, 45px 45px;
		}
		.pattern3{
			width: 500px;
			height: 500px;

			/*background的属性的样式会覆盖backgrond-color，但background-image属性不会覆盖*/
			background-color: #fff;
			background-image: radial-gradient(rgba(139, 207, 232, 0.24) 50%, rgb(139, 207, 232)),
			repeating-radial-gradient(rgba(139, 207, 232, 0.71) 10px, transparent 10px, transparent 30px, rgba(139, 207, 232, 0.24) 30px, rgba(139, 207, 232, 0.24) 35px);
			background-size: auto, 100px 100px;
		}
	</style>
</head>
<body>

<p class="pattern1"></p>
<p class="pattern2"></p>
<p class="pattern3"></p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style>
		.pattern1{
			width: 500px;
			height: 500px;
			border: 1px solid #eee;

			/*背景渐变的使用方法与背景图片类似，且排在最前面的图像会被放置在最上面*/
			background: url(./images/square.png),
			linear-gradient(to right, rgba(255, 165, 184, 0.2) 20px,transparent 20px),
			linear-gradient(to right, rgb(255, 165, 184) 1px,transparent 1px),
			rgba(255, 165, 184, 0.05); /*背景颜色放置在最下面*/
			background-repeat: no-repeat, repeat-x, repeat;
			background-size: 50%, 50px 70%, 50px;
			background-position:center, -10px center,left top;
		}
		.pattern2{
			width: 500px;
			height: 500px;
			border: 1px solid #eee;
			background-color: rgba(255, 94, 112, 0.38);
			background: linear-gradient(to right, transparent 25%, rgba(255, 94, 112, 0.2), transparent 75%),
			linear-gradient(to right, rgba(255, 94, 112, 0.51) 1px, transparent 1px) center,
			linear-gradient(to top, transparent 25%, rgba(255, 94, 112, 0.2), transparent 75%),
			linear-gradient(to top, rgba(255, 94, 112, 0.51) 1px, transparent 1px) center;
			background-size: 50px;
		}
	</style>
</head>
<body>
<p class="pattern1"></p>
<p class="pattern2"></p>
</body>
</html>