先不说技术，看实现的效果， 与原图（左图）相比，‘灯光’ 照射（右图）下的小姐姐是不是更有魅力了！！

那么下面就说说大家关心的技术实现过程。

其实这是我在学习css属性 mix-blend-mode 时想出的图片实现方式，下面先介绍一下mix-blend-mode这个属性，”blend-mode”就是混合模式的意思，该CSS属性作用是让元素内容和这个元素的背景以及下面的元素发生“混合”。

属性取值及其作用效果如下：

 mix-blend-mode: normal;          //正常

 mix-blend-mode: multiply;        //正片叠底

 mix-blend-mode: screen;          //滤色

 mix-blend-mode: overlay;         //叠加

 mix-blend-mode: darken;          //变暗

 mix-blend-mode: lighten;         //变亮

 mix-blend-mode: color-dodge;     //颜色减淡

 mix-blend-mode: color-burn;      //颜色加深

 mix-blend-mode: hard-light;      //强光

 mix-blend-mode: soft-light;      //柔光

 mix-blend-mode: difference;      //差值

 mix-blend-mode: exclusion;       //排除

 mix-blend-mode: hue;             //色相

 mix-blend-mode: saturation;      //饱和度

 mix-blend-mode: color;           //颜色

 mix-blend-mode: luminosity;      //亮度

 mix-blend-mode: initial;         //初始

 mix-blend-mode: inherit;         //继承

 mix-blend-mode: unset;           //复原

而此次该效果的实现是由上面左图与下图（背景为透明的）一块合成的。

所以，这里用到的 mix-blend-mode 值是overlay。代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style>

     *{padding: 0;margin: 0;}

     .beauty{

         height: 1000px;

         width: 667px;

         background-image: url(./beauty.jpg);

         border-radius: 100%;

         position: relative;

         transform: scale(0.5);

     }

     .beauty img{

         height: 200%;

         width: 200%;

         mix-blend-mode: overlay;

         position: absolute;

         top:-90%;

         left:-105%;

     }

 </style>

 <body>

     <div class='beauty'>

         <img src="./shine.png" alt="">

     </div>

 </body>

 <script>

 </script>

 </html>

让两图片重叠，然后设置混合方式是重叠，就这么简单！哈哈！

想要原素材的同学可以留下邮箱，我会把发给你

纯css实现图片的灯光照射效果，高逼格图片展示的更多相关文章

  1. 纯CSS实现网站常用的五角星评分和分数展示交互效果

    最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...

  2. DDGScreenShot —图片加各种滤镜高逼格操作

    写在前面 图片加各种滤镜操作,当然苹果给开发者提供了相关的api和封装, 大部分开发者感觉这是这是晦涩难懂的,接下来就让我们来了解一下, 其实也没有那么深不可测. 代码如下(每一步已经解释的很详细) ...

  3. css实现六边形图片（最简单易懂方法实现高逼格图片展示）

    不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

  4. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  5. 纯CSS实现三列DIV等高布局

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  6. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  7. 使用纯 CSS 实现 Google Photos 照片列表布局

    文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...

  8. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

  9. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

随机推荐

  1. MySQL备份常用命令总结

    MySQL备份常用命令总结 1.数据库和数据全部备份 mysqldump -uroot -pPassword -hlocalhost databasename > test.sqlmysqldu ...

  2. ASP.NET Core 使用 URL Rewrite 中间件实现 HTTP 重定向到 HTTPS

    在传统 ASP.NET 程序中,我们可以通过配置 IIS 的“URL 重写”功能实现将 HTTP 请求重定向为 HTTPS .但是该方法在 ASP.NET Core 应用中不再工作.在 ASP.NET ...

  3. Mysql 远程登录及常用命令

    第一招.mysql服务的启动和停止 net stop mysql net start mysql 第二招.登陆mysql 语法如下: mysql -u用户名 -p用户密码 键入命令mysql -uro ...

  4. 用Putty通过SSH访问Linux服务器

    1,sudo apt-get install ssh 2,sudo service ssh restart 3,重启ssh成功后,就可以直接用Putty访问服务器.

  5. Java基础系列--集合之ArrayList

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/8494618.html 一.概述 ArrayList是Java集合体系中最常使用,也是最简单 ...

  6. POJ - 1984 Navigation Nightmare 种类并查集

    思路:记录每个点与其根结点的横向距离和纵向距离,当知道其父节点与根结点的关系,很容易推出当前节点与根结点的关系: 直接相加即可. int p = a[x].par; a[x].dx += a[p].d ...

  7. python file文件操作--内置对象open

    说明: 1. 函数功能打开一个文件,返回一个文件读写对象,然后可以对文件进行相应读写操作. 2. file参数表示的需要打开文件的相对路径(当前工作目录)或者一个绝对路径,当传入路径不存在此文件会报错 ...

  8. csrf

    什么是CSRF: CSRF(Cross-site request forgery),中文名称:跨站请求伪造 攻击者盗用了你的身份,以你的名义发送恶意请求.CSRF能够做的事情包括:以你名义发送邮件,发 ...

  9. eclipse中maven的run as打war包失败的问题

    场景一: 由于某些原因,有的时候需要暂时在断网的情况下,或者更标准的说,是在连不上公司的maven公有仓库的情况下打包. 很长一段时间,我打包都是在eclipse中用run as在线打包,直到前不久一 ...

  10. ubuntu 重启命令,ubuntu 重启网卡方法

    ubuntu 重启命令 重启命令:1.reboot2.shutdown -r now 立刻重启(root用户使用)3.shutdown -r 10 过10分钟自动重启(root用户使用)4.shutd ...