zoukankan html css js c++ java

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>

查看全文

相关阅读:
Android布局1
QML 自定义折线图
 QML ChartView 画折线图
 操作系统复习笔记
 Redis的使用
 Git的基本使用
 Python json to excel/csv
.NET中进行Base64加密解密
 用 IIS 7、ARR 與 Velocity 建设高性能的大型网站
 微信突然出现redirect_uri 参数错误

原文地址：https://www.cnblogs.com/liufeiran/p/15608684.html