如何打造图片中左上到左下以及右上到右下的丝滑渐变背景?

如何打造图片中左上到左下以及右上到右下的丝滑渐变背景?

css 渐变背景实现左上到右下的自然过渡

如何打造图片中左上到左下以及右上到右下的丝滑渐变背景?

渐变背景采用左到右布局,利用白色覆盖渐隐部分,并叠加混合模式过滤白色,让两侧渐变连接自然,而指针事件设置穿透,确保鼠标交互不受影响。具体代码如下:

background: 
  linear-gradient(transparent, white 20%), 
  linear-gradient(to right, #c2def6, #ecc9e3);
mix-blend-mode: darken;
pointer-events: none;

以上就是如何打造图片中左上到左下以及右上到右下的丝滑渐变背景?的详细内容,更多请关注硕下网其它相关文章!