第一次為人,迷茫怔揩,恐懼捉邢,壓抑難免,不要想太多商膊。
1,background-image類型
1).線性漸變(Linear Gradients)- 向下/向上/向左/向右/對角方向
2).徑向漸變(Radial Gradients)- 由它們的中心定義
3).重復(fù)(repeating-Radial Gradients)(repeating-Radial Gradients)
加上 background-size 為固定寬度平鋪
否則線性漸變
2,方向
1伏伐,to right,to left,to top,to bottom, to top left ........
例:background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
2,角度晕拆,如下
例:background-image: linear-gradient(-90deg, red, yellow);
3藐翎,使用透明度
transparent
background: white;
background-image: linear-gradient(90deg, rgba(180, 200, 0, 0.5) 60%, transparent 0),
linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
background-size: 30px 30px;
//transparent 0 透明
4,波點(diǎn)
.boDian {
width: 900px;
height: 900px;
background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 90px 90px;
background-position: 0 0, 45px 45px;
}
5,scss函數(shù)封裝
@mixin boDian($size,$dot,$base,$accent){
background:$base;
background-image: radial-gradient($accent $dot, transparent 0),
radial-gradient($accent $dot, transparent 0);
background-size: $size $size;
background-position: 0 0, $size/2 $size/2;
}
//引用
@include boDian(30px,30%,#65,tan)
6,切角效果
.boy {
width: 800px;
height: 494.4px;
background: linear-gradient(-45deg, transparent 30px, #655 0) right,
linear-gradient(45deg, transparent 30px, #58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
6.1圓角效果
.boy {
width: 800px;
height: 494px;
background: radial-gradient(circle at top left, transparent 45px, red 0) top left,
radial-gradient(circle at top right, transparent 45px, green 0) top right,
radial-gradient(circle at bottom right, transparent 45px, teal 0) bottom right,
radial-gradient(circle at bottom left, transparent 45px, pink 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
7实幕,filter
高斯模糊:filter: blur(5px);
圖片變亮:filter: brightness(200%);
圖像的對比度:filter: contrast(200%);
陰影效果:filter: drop-shadow(8px 8px 10px red);
灰度圖像:filter: grayscale(50%);
給圖像應(yīng)用色相旋轉(zhuǎn):filter: hue-rotate(90deg);
反轉(zhuǎn)輸入圖像: filter: invert(100%);
透明程度:filter: opacity(30%);
像飽和度:filter: saturate(800%);
將圖像轉(zhuǎn)換為深褐色: filter: sepia(100%);
......