1.亮块为原图，底部为调深图
<style> .clip-me { clip-path: inset(10px 20px 30px 40px); clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); position: absolute; clip: rect(100px, 160px, 170px, 60px); z-index: 1 } .clip-me1{ -webkit-filter: brightness(70%); filter: brightness(70%); } </style> <body> <div class="clip-me"> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c8f5cfa5011449fb6f8b36667df625c~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.awebp"> </div> <div class="clip-me1"> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c8f5cfa5011449fb6f8b36667df625c~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.awebp"> </div> </body>
2.亮块为调亮图，底部为原图
<style> .clip-me { clip-path: inset(10px 20px 30px 40px); clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); position: absolute; clip: rect(100px, 160px, 170px, 60px); -webkit-filter: brightness(200%); filter: brightness(200%); } </style> <body> <div class="clip-me"> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c8f5cfa5011449fb6f8b36667df625c~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.awebp"> </div> <div> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c8f5cfa5011449fb6f8b36667df625c~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.awebp"> </div> </body>