css效果-混合模式

css效果 1、轮播盒子 父盒子 .father { overflow: scroll; scroll-behavior: smooth; scroll-snap-type: y mandatory; } 子盒子 .child { scroll-snap-align: start; //

css效果

1、轮播盒子

父盒子
.father {
	overflow: scroll;
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
}

子盒子
.child {
	scroll-snap-align: start; // start end center
 	 scroll-snap-stop: always;
}

2、混合模式

1.背景混合模式
background-blend-mode:normal;
可选值  multiply screen overlay darken lighten
color-dodge saturation color|luminosity
 
 2.与父盒子混合模式
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
LICENSED UNDER CC BY-NC-SA 4.0
Comment