效果图：

代码如下：

<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. Dojo.declare使用方法详解

    ArcGIS API for JavaScript是基于dojo开发的一套API,在实际生产中,我们需要再根据自己的需求实现自定义的功能,最后抽象成接口给前端调用. 我们使用dojo的declare来 ...

  2. python 部署lvs

    import paramiko ssh = paramiko.SSHClient() ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy()) ...

  3. Undo 相关的等待事件和已知问题 (Doc ID 1575701.1)

    Undo Related Wait Events & Known Issues (Doc ID 1575701.1) APPLIES TO: Oracle Database - Enterpr ...

  4. 8. java 面向对象

    一.面向对象特征 1. 封装 方法就是一种封装 关键字private也是一种封装 封装就是讲一些逻辑细节信息隐藏起来,对于外界不可见:外界只需调用我即可: 一旦使用了private进行修饰,那么本类当 ...

  5. 利用 ROW_NUMBER() OVER ( ORDER BY 进行选择性排序，按不同字段进行排序处理，分页

    --就在OVER order by 中用case语句进行判断. IF ( OBJECT_ID('tempdb..#TempTable') IS NOT NULL ) DROP TABLE #TempT ...

  6. C语言的指针用法：输入一堆字符，把非字母的删去。

    char *p,a[20]; int i; gets(a);    //这个语句不同于getchar(),后者只能一次输入一个,而前者可以一次输完所有的字符!!! p=a;        //这个语句 ...

  7. mysql关联两张表时的编码问题

    Mysql关联两张表时,产生错误提示Illegal mix of collations 1.先用工具把数据库.两张表的编码方式改变 2.这步很重要,需要改变字段的编码方式. ALTER TABLE ` ...

  8. Note | 常用指令，工具，教程和经验笔记

    目录 图像处理 机器学习和数学 编程环境和工具 写作工具 其他 图像处理 获取图像频域并分解为高低频:https://www.cnblogs.com/RyanXing/p/11630493.html ...

  9. Ubuntu Idea 快捷键 Ctrl+Alt+S 无法使用解决

    Idea 里习惯了用 Ctrl+Alt+S 打开设置界面,在 Ubuntu 下会因为快捷键冲突无法使用 系统快捷键 打开系统设置中的快捷键设置,按 Backspace 键禁用 Fcitx 如果你的输入 ...

  10. 划词标注1——使用svg绘制换行文本并自动识别库中字典数据

    业务需求 给出一段文本,自动识别出文本中包含的关键字信息,关键字是库里已知的数据,根据类型的不同显示出不同的颜色 业务分析 1)采用css:文本识别出来后,根据识别出的文本更改对应文本的dom,通过更 ...