<!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>