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

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

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

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

  1.  mix-blend-mode: normal;          //正常
  2.  mix-blend-mode: multiply;        //正片叠底
  3.  mix-blend-mode: screen;          //滤色
  4.  mix-blend-mode: overlay;         //叠加
  5.  mix-blend-mode: darken;          //变暗
  6.  mix-blend-mode: lighten;         //变亮
  7.  mix-blend-mode: color-dodge;     //颜色减淡
  8.  mix-blend-mode: color-burn;      //颜色加深
  9.  mix-blend-mode: hard-light;      //强光
  10.  mix-blend-mode: soft-light;      //柔光
  11.  mix-blend-mode: difference;      //差值
  12.  mix-blend-mode: exclusion;       //排除
  13.  mix-blend-mode: hue;             //色相
  14.  mix-blend-mode: saturation;      //饱和度
  15.  mix-blend-mode: color;           //颜色
  16.  mix-blend-mode: luminosity;      //亮度
  17.  
  18.  mix-blend-mode: initial;         //初始
  19.  mix-blend-mode: inherit;         //继承
  20.  mix-blend-mode: unset;           //复原

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

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.  </head>
  7.  <style>
  8.      *{padding: 0;margin: 0;}
  9.      .beauty{
  10.          height: 1000px;
  11.          width: 667px;
  12.          background-image: url(./beauty.jpg);
  13.          border-radius: 100%;
  14.          position: relative;
  15.          transform: scale(0.5);
  16.      }
  17.      .beauty img{
  18.          height: 200%;
  19.          width: 200%;
  20.          mix-blend-mode: overlay;
  21.          position: absolute;
  22.          top:-90%;
  23.          left:-105%;
  24.      }
  25.  </style>
  26.  <body>
  27.      <div class='beauty'>
  28.          <img src="./shine.png" alt="">
  29.      </div>
  30.  </body>
  31.  <script>
  32.  </script>
  33.  </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. Linux下配置APACHE支持PHP环境

    编辑 /usr/local/apache2/conf/httpd.conf 文件时要注意: 找到: AddType application/x-compress .Z AddType applicat ...

  2. 洛谷P4014 分配问题【最小/大费用流】题解+AC代码

    洛谷P4014 分配问题[最小/大费用流]题解+AC代码 题目描述 有 n 件工作要分配给 n 个人做.第 i 个人做第 j 件工作产生的效益为c ij. 试设计一个将 n 件工作分配给 n 个人做的 ...

  3. 工作笔记--自动切换host的python code

    修改host代码: #coding:utf-8import os,timepwd = os.path.dirname(__file__) #获取当前文件夹的绝对路径pull_host_cmd = 'a ...

  4. 解决react-router4在browserhistory路由下的nginx的白屏或者404问题

    使用react-router,官方推荐用browserhistory,美观简洁.但是nginx服务器端的配置也让人头疼. 首先看官方举例的方法: server { location / { try_f ...

  5. CentOS 7.3 minimal 开启网络服务

    CentOS7解决不能上网问题 1.先进入控制台 输入ip addr 2.然后su 获取超级管理员权限 3.编辑网络配置文件 vi  /etc/sysonfig/network-scripts/ifc ...

  6. 机器学习之支持向量机（二）：SMO算法

    注:关于支持向量机系列文章是借鉴大神的神作,加以自己的理解写成的:若对原作者有损请告知,我会及时处理.转载请标明来源. 序: 我在支持向量机系列中主要讲支持向量机的公式推导,第一部分讲到推出拉格朗日对 ...

  7. Sping Boot入门到实战之入门篇（一）：Spring Boot简介

    该篇为Spring Boot入门到实战系列入门篇的第一篇.对Spring Boot做一个大致的介绍. 传统的基于Spring的Java Web应用,需要配置web.xml, applicationCo ...

  8. AssetBundle实现服务器下载并从本地读取

    废话不多说  直接上代码. 从服务器下载的, 很简单 private IEnumerator Start() { byte[] ab = null; int len = 0; WWW www =nul ...

  9. CodeForces-748C

    这题就是确定一个点,然后去找能够实现最短距离的点且距离最远的点,因为题目要求点最少.在查找时,如果从最后的点开始枚举,找到的第一个满足距离最短的点一定是最远点,但是查找的复杂度是O(n),共有n次查找 ...

  10. Python基础学习参考（六）：列表和元组

    一．列表 列表是一个容器,里面可以放置一组数据,并且列表中的每个元素都具有位置索引.列表中的每个元素是可以改变的,对列表操作都会影响原来的列表.列表的定义通过"[ ]"来定义,元素 ...