需求：

对图片做css羽化处理

实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="Generator" content="EditPlus&reg;" />
  6. <meta name="Author" content="" />
  7. <meta name="Keywords" content="" />
  8. <meta name="Description" content="" />
  9. <title>Document</title>
  10. </head>
  11. <body>
  12. <img style="display: block;  height: 100%;width: 100%;" src="http://js.linkrmb.com/mt.jpg" />
  13. <div style="
  14. position: absolute;
  15. top: 0;
  16. height: 100%;
  17. width: 100%;
  18. box-shadow: 0 0 70px 30px rgb(249, 249, 249) inset;"></div>
  19. </body>
  20. </html>

效果：

css之图片羽化处理的更多相关文章

  1. Django调用JS、CSS、图片等静态文件

    zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...

  2. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  3. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  4. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

  5. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  6. 网站性能优化之CSS无图片技术：三角形

    1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...

  7. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

  8. CSS实现图片快速等比例缩放，效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

  9. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

随机推荐

  1. 【BZOJ 3028】 3028: 食物 （生成函数）

    3028: 食物 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 569  Solved: 382 Description 明明这次又要出去旅游了,和上次 ...

  2. HTTP错误405

    405 - 用来访问本页面的(方法不被允许) HTTP 错误 405 -禁止访问资源 HTTP 错误 405 405 不允许此方法 对于请求所标识的资源,不允许使用请求行中所指定的方法.请确保为所请求 ...

  3. JVM进程cpu飙高分析

    在项目快速迭代中版本发布频繁  近期上线报错一个JVM导致服务器cpu飙高 但内存充足的原因现象.  对于耗内存的JVM程序来而言,  基本可以断定是线程僵死(死锁.死循环等)问题. 这里是纪录一下排 ...

  4. Windows平台开发Mapreduce程序远程调用运行在Hadoop集群—Yarn调度引擎异常

    共享原因:虽然用一篇博文写问题感觉有点奢侈,但是搜索百度,相关文章太少了,苦苦探寻日志才找到解决方案. 遇到问题:在windows平台上开发的mapreduce程序,运行迟迟没有结果. Mapredu ...

  5. Tesseract OCR简单实用介绍

    做字符识别,不能不了解google的Tesseract-OCR,但是如何在自己的工程中使用其API倒是语焉不详,官网上倒是很详尽地也很啰嗦地介绍如何重新编译生成适合自己平台的lib和dll,经过近些天 ...

  6. spring cloud 学习(7) - 生产环境如何不停机热发布？

    业务繁忙的系统,原则上是不允许停机的,那么问题来了,如果真有严重的bug要修复,不得不发布,怎么做到不停机发布,对业务无感知呢? eureka 提供了一系列rest url,可以对注册实例进行操作,比 ...

  7. 12174 - Shuffle

    这道题能够用"滑动窗体"的思想来做,假想一个滑动的窗体,这个窗体的大小是s.划过一个大小为n的区域,可是由于s可能比n大,所以我们最好还是不去考虑s和n的大小,直接开出一个足够大的 ...

  8. STM32F4 Timer Internal Trigger Connection

    The Timers can be cascaded to make more complex timing relationships, or longer periods. Internally ...

  9. 【Go命令教程】命令汇总

    [Go命令教程]1. 标准命令详解 [Go命令教程]2. go build [Go命令教程]3. go install [Go命令教程]4. go get [Go命令教程]5. go clean [G ...

  10. HDU 4920 Matrix multiplication(矩阵相乘)

    各种TEL,233啊.没想到是处理掉0的情况就能够过啊.一直以为会有极端数据.没想到居然是这种啊..在网上看到了一个AC的奇妙的代码,经典的矩阵乘法,仅仅只是把最内层的枚举,移到外面就过了啊...有点 ...