html背景叠加渐变,使CSS3 用after元素给图片叠加渐变背景效果

CSS

语言：

CSSSCSS

确定

body {

text-align: center;

padding: 0 2em;

font-family: 'Open Sans', 'San Francisco', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

overflow-x: hidden;

}

figure {

display: block;

width: 500px;

height: 500px;

overflow: hidden;

margin: 0 auto;

position: relative;

}

figure:after {

content: '';

-webkit-transition-duration: 0.25s;

transition-duration: 0.25s;

display: block;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

opacity: 1;

background: -webkit-radial-gradient(390px 220px, 80px 160px, deeppink 30%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(75px 300px, 55px 100px, deeppink, rgba(0, 0, 0, 0));

background: radial-gradient(80px 160px at 390px 220px, deeppink 30%, rgba(0, 0, 0, 0)), radial-gradient(55px 100px at 75px 300px, deeppink, rgba(0, 0, 0, 0));

mix-blend-mode: hue;

}

figure:hover:before,

figure:hover:after {

opacity: 0;

}

img {

width: 100%;

-webkit-filter: saturate(1.1);

filter: saturate(1.1);

}