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

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

其实这是我在学习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. Java中的双重检查锁（double checked locking）

    最初的代码 在最近的项目中,写出了这样的一段代码 private static SomeClass instance; public SomeClass getInstance() { if (nul ...

  2. 抛砖引玉之~sftp

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux XFtp用惯了,没有它就不行了?Linux就不能文件传输了? 答案肯定是~No ...

  3. 微信小程序初识

    http://lib.csdn.net/article/wechat/46742 微信小程序的前途和定位有什么疑惑?点进去 简单先记几个印象名词:流量入口,线下是重点,“即用即走”适合低频工具类产品. ...

  4. 用yii2给app写接口（上）

    Yii2如何实现RESTful风格的API 1.建立单独的应用程序 为了增加程序的可维护性,易操作性,我们选择新建一套应用程序,这也是为了和前台应用.后台应用区分开操作.有些人要嚷嚷了,为啥非得单独搞 ...

  5. Shell脚本的颜色样式及属性控制

    首先看一下格式 echo -e "\033[字背景颜色:文字颜色m字符串\033[0m" 举例 echo -e "\033[41;36m 字体 \033[0m" ...

  6. 2道acm简单题（2013）：1.（时分秒）时间相减；2.主持人和N-1个人玩游戏，每个人说出自己认识的人数，判断其中是否有人说谎。

    /*1.题目:输入一个数,代表要检测的例子的个数,每个例子中:输入两个时间(格式HH:MM : SS),前面时间减去后面时间,输出在时钟上显示的时间,格式一样,如果是以为数字的前面补零.*//**思路 ...

  7. Ajax检测用户名是否已经注册

    程序功能 当用户名输入完成(即用户名输入框失去焦点),利用Ajax检测用户名是否已经注册! 实现过程 利用Ajax向CheckUserServlet发送请求,判断该用户名是否可用.这里只是为了演示Aj ...

  8. HDU - 1850 Nim博弈

    思路:可以对任意一堆牌进行操作,根据Nim博弈定理--所有堆的数量异或值为0就是P态,否则为N态,那么直接对某堆牌操作能让所有牌异或值为0即可,首先求得所有牌堆的异或值,然后枚举每一堆,用已经得到的异 ...

  9. 多key业务，数据库水平切分架构一次搞定

    数据库水平切分是一个很有意思的话题,不同业务类型,数据库水平切分的方法不同. 本篇将以"订单中心"为例,介绍"多key"类业务,随着数据量的逐步增大,数据库性能 ...

  10. vue项目中遇到的问题

    在 export defaul new Router({ )} 这个路由配置中一定要加mode : 'history' 否者就会在路由前面默认添加# 路由跳转的几种方式: 在VUE中使用less来编译 ...