效果图：

代码如下：

<div class="row" style="width:100%; position:relative;z-index:1;margin:0 auto; background: #000;">

    <img src="~/images/touxiang.jpg" style="width:100%; opacity:0.6; filter: alpha(opacity=60);"/>

    <div style="width:100%;position:absolute;z-index:2;top:50%; text-align:center;">

        <h2 style="color:#fff">文字浮动在图片上方</h2>

    </div>

</div>

css为图片添加一层蒙版并在上层显示文字等的更多相关文章

  1. 使用CSS为图片添加边框的几种方法

    css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果 通过使用带有一些padding之的背景图来添加阴影效果. HTML <img ...

  2. 使用CSS为图片添加更多趣味的5种方法

    使用Photoshop为每个图片添加某种样式虽然可行,但会是相当乏味且困难的长久工作.下面要介绍的CSS技巧将帮助你从痛苦中解脱出来! 阴影效果 通过使用带有一些padding之的背景图来添加阴影效果 ...

  3. CSS 背景图片 添加 重复和定位。

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  4. css 给图片添加滤镜效果，透明层毛玻璃效果

    我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果 原图 添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...

  5. css实现图片未加载完成时占位显示

    通过css控制,可以实现加载网络图片时,未加载完成的时候显示本地一张占位图,加载完成后显示网络图片: 原理:通过在img标签的after伪元素上添加一张占位图,并且img都设置为position:re ...

  6. Bootstrap css背景图片的设置

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

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

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

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

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

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

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

随机推荐

  1. 一些有用的Function或Class Method，持续更新

    一些有用的Function 或 Class Method Function/Class Method 类型 作用 模块 备注 co_cost_show_order_costs Func 显示生产订单. ...

  2. Java后端，最全知识点

    你可能有所感悟.零散的资料读了很多,但是很难有提升.到处是干货,但是并没什么用,简单来说就是缺乏系统化.另外,噪音太多,雷同的框架一大把,我不至于全都要去学了吧. 这里,根据基础.Java基础.Jav ...

  3. RDIFramework.NET敏捷开发框架Web新增邮件中心实现便捷式的邮件收发

    1.引言 邮件收发在很多业务系统中都有这样的需求,是比较正式和常用的功能.在我们的框架中提供了邮件中心功能模块,集内部邮件的收发.邮件归类.邮件星标的标记.邮件的删除与彻底删除等,邮件中心功能模块界面 ...

  4. requests---requests请求表单

    在做接口测试的时候我们会遇到过需要填写表单的形式,那么如何通过requests进行请求呢? 这里需要引入新的python的第3方库requests-toolbelt requests-toolbelt ...

  5. 文件操作NIO

    在丑陋的 Java I/O 编程方式诞生多年以后,Java终于简化了文件读写的基本操作. 两个基本组件 文件或者目录的路径: 文件本身. 这块基本都是些记忆性的东西,没什么过多的需要写的地方,用的时候 ...

  6. 3. java 方法入门

    一.方法定义 1. 定义格式 public static void 方法名称(){ 方法体 } 1. 方法名称:命名和变量一致,小驼峰式 2. 方法体:大括号中可以包含任意条语句 注意事项: 1. 方 ...

  7. JavaScript：ES6的新特性

    1.关键字 const:修饰常量.ES6之前只有变量的声明字段var,ES6开始引入常量关键字,被修饰的变量无法被修改. <script type="text/javascript&q ...

  8. Redis 笔记整理:回收策略与 LRU 算法

    Redis的回收策略 noeviction:返回错误当内存限制达到并且客户端尝试执行会让更多内存被使用的命令(大部分的写入指令,但DEL和几个例外) allkeys-lru: 尝试回收最少使用的键(L ...

  9. HTML5之图片转base64编码

    之前在群里看到很多小哥哥小姐姐讨论关于图片base64互转的方法,刚好我之前用到的一个方法给大家分享一下. <!Doctype html><html> <head> ...

  10. Anaconda更新报404：UnavailableInvalidChannel: The channel is not accessible or is invalid.error404

    Anaconda更新一直报错,修改为国内镜像也不好使,最终找到了未被屏蔽的镜像. 错误日志: UnavailableInvalidChannel: The channel is not accessi ...