css3渐变属性制作纹理图案_background-image: linear-gradient(rgba(255, 255, 2-CSDN博客

本文链接：https://blog.csdn.net/weixin_44206773/article/details/103541443

1.条纹背景
在这里插入图片描述

.pt1 {
   
    background-size: 50px 50px;
    background-color: #0ae;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

在这里插入图片描述

.pt2 {
   
    background-size: 50px 50px;
    background-color: #f90;
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

2.红白格子背景
在这里插入图片描述

.pt3 {
   
    background-size: 50px 50px;
    background-color: white;
    background-image: 
    	-webkit-linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    	-webkit-linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
    background-image: 
    	linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    	linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5))
}

3.斜线背景
在这里插入图片描述

.pt4 {
   
    background-size: 50px 50px;
    background-color: #ac0;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

在这里插入图片描述

.pt5 {
   
    background-size: 50px 50px;
    background-color: #c16;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

4.黑白棋盘背景
在这里插入图片描述

.pt6 {
   
    background-color: #eee;
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    background-image: 
    	-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    	-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: 
    	linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    	linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}

5.黑白菱形背景
在这里插入图片描述

.pt7 {
   
    background-color: #eee;
    background-size: 60px 60px;
    background-image: 
    	-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),