渐变组合：透过彼此的透明区域显现
网格图案--桌布
div{
width: 30em;
height:30em;
background-color: white;
background-image:
linear-gradient(90deg,
rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(
rgba(200,0,0,.5) 50%, transparent 0);
background-size:30px 30px;
}
单线框
div{
width: 30em;
height:30em;
background-color: white;
background-image:
linear-gradient(90deg,
rgba(200,0,0,.5) 1px, transparent 0),
linear-gradient(
rgba(200,0,0,.5) 1px, transparent 0);
background-size:30px 30px;
}
蓝底白线等宽方格
div{
width: 300px;
height:300px;
background-color: #58a;
background-image:
linear-gradient(
white 1px, transparent 0),
linear-gradient(90deg,
white 1px, transparent 0);
background-size:30px 30px;
}
大方格中包含小方格
div{
width: 300px;
height:300px;
background-color: #58a;
background-image:
linear-gradient(white 2px, transparent 0),
linear-gradient(90deg,white 2px, transparent 0),
linear-gradient(
hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg,
hsla(0,0%,100%,.3) 1px, transparent 0);
background-size:75px 75px, 75px 75px, 15px 15px, 15px 15px;
}
田地
div{
width: 300px;
height:300px;
background-color: green;
background-image:
linear-gradient(white 20px, transparent 0),
linear-gradient(90deg,white 20px, transparent 0);
background-size:75px 125px;
}
波点
div{
width: 300px;
height:300px;
background-color: #655;
background-image:
radial-gradient(tan 20%, transparent 0);/*20%决定圆点大小*/
background-size:30px 30px; /*决定圆点大小*/
}
波点桌布
div{
width: 300px;
height:300px;
background-color: #655;
background-image:
radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size:30px 30px;
background-position: 0 0, 15px 15px;
/*第二层偏移位置是圆点宽高的一半*/
}
小三角在方格中
div{
width: 300px;
height:300px;
background-color: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0);
background-size:30px 30px;
}
一个方格中对角是三角形（上左下右）
div{
width: 300px;
height:300px;
background-color: #eee;
background-image:
linear-gradient(-45deg, #bbb 25%, transparent 0),
linear-gradient(-45deg, transparent 75%, #bbb 0);
background-size:30px 30px;
}
一个方格中对角是三角形（上右下左）
div{
width: 300px;
height:300px;
background-color: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-size:30px 30px;
}
棋盘
div{
width: 300px;
height:300px;
background-color: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position:0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;
}
双色方块
div{
width: 300px;
height:300px;
background-color: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, pink 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, pink 0);
background-position:0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;
}
立体方块形成的洞
div{
width: 300px;
height:300px;
background-color: #eee;
background-image:
conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
background-size: 30px 30px;
}
随机条纹
div{
width: 300px;
height:300px;
background:hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;/*控制间距*/
}
图像边框--2个div
.some{
background:url(background.png);
background-size: cover;
padding:1em;
}
.some > div{
background-color: white;
padding:1em;
}
I Love You
图像边框--1个div
.some{
padding:1em;
border:1em solid transparent;
background:linear-gradient(white, white),
url(background.png);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
}
background-origin与background-clip
/*希望背景对齐到绿色框的外边缘*/
测试背景和边框的关系
.img-bg{
width:456px;
height: 360px;
padding:50px;
border:50px solid rgba(0,204,0,.5);
background:url(flower.png);
background-repeat: no-repeat;
/*background-origin: border-box;
将左上角对齐到绿色边框的外边缘*/
/*background-origin: content-box;
对齐到内容框，效果将会使图片左上角对齐到文字内容的左上角*/
background-origin: border-box;
/*background-clip: border-box;图片在边框下，可见*/
/*background-clip: border-box;图片在边框下，被边框遮挡一半*/
/*background-clip: content-box;图片在边框下，不可见*/
/*background-clip背景位置不受影响，只是剪裁*/
}
信封
div{
width: 300px;
height: 200px;
padding:1em;
border:1em solid transparent;
background:linear-gradient(white, white) content-box,/*内容区白色*/
repeating-linear-gradient(-45deg,
red 0, red 12.5%,
black 0, black 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%)
0 / 5em 5em;
}
background-position-x:0
background-size:5em 5em
repeating-linear-gradient
用于创建重复的线性渐变 "图像"
蚂蚁行军--虚线动画
div{
width: 300px;
height: 200px;
padding:1em;
border:1px solid transparent;
background:linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%,
white 0, white 50%)
0 / .6em .6em;
animation: ants 12s linear infinite;
}
@keyframes ants {
to {
background-position: 100%;
}
}