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>

查看全文

相关阅读:
docker如何将运行中的容器保存为docker镜像?
java8流的地址
 maven命令package、install、deploy
windows下设置redis开机自启动
 mysql的安装参考
 service mysql启动失败unit not found
JAVA中Wait()与Notity()、同步队列与等待队列
 Java8函数式编程
 Groovy ConfigSlurper()读取配置文件简易示例
 SoapUI官方文档

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