• css3图片亮块

    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>
  • 相关阅读:
    es6里面的arr方法
    for循环比较
    window.location各属性的值
    浏览器的缓存机制
    es6中的双箭头函数
    前端开发模拟数据------webpack-api-mocker
    对象的深拷贝和浅拷贝
    Web应用程序的安全问题
    this指向问题
    postman使用篇最全整理
  • 原文地址：https://www.cnblogs.com/liufeiran/p/15608684.html
Copyright © 2020-2023  润新知