1.反射效果--倒影
.example{
/* The reflection will appear below. Other possible values are above | left | right */
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
}
2.奇妙的mask--融合
.example{
width: 100%;
height:100%;
background: url('../image/11.webp');
mask-image: url('../image/q.png');
mask-repeat: no-repeat;
}
mask: linear-gradient(45deg, #000 50%, transparent 50%);
mask: linear-gradient(45deg, #000 40%, transparent 60%)
3.滤镜效果
//灰色
.example {
filter: grayscale(100%);
}
https://www.w3schools.com/cssref/css3_pr_filter.php
.image{
background-image: url(YOUR URL);
background-size: cover;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.effect{
font-size: x-large;
color: white;
font-weight: 800;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px);
padding: 20px;
}
