效果图：

代码如下：

<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. Angular中使用bootstrap样式

    Angular中使用bootstrap样式 Angular中引入bootstrap的方法   方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: " ...

  2. 【分享】Jenkins自动化部署全套视频教程

    1.课件 见博客:在线课件 2.教程列表 课程概况:该课程共8节,时长约80分钟. 建议学习方式:你可以在上班的路上或中午休息的时候,将视频调到1.5的观看速度,视频全部看完后,在按照课件操作. 3. ...

  3. May 26th, 2019. Week 22nd, Sunday

    A real loser is somebody that's so afraid of not winning, they don't even try. 真正的失败者,是那些因为害怕不能成功,就连 ...

  4. WPF 精修篇 依赖属性

    原文:WPF 精修篇 依赖属性 依赖属性使用场景 1. 希望可在样式中设置属性. 2. 希望属性支持数据绑定. 3. 希望可使用动态资源引用设置属性. 4. 希望从元素树中的父元素自动继承属性值. 5 ...

  5. <Math> 29 365

    29. Divide Two Integers class Solution { public int divide(int dividend, int divisor) { if(dividend ...

  6. [译]发布ABP v0.19包含Angular UI选项

    发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...

  7. 第04组 Alpha冲刺（4/4）

    队名:斗地组 组长博客:地址 作业博客:Alpha冲刺(4/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.分配展示任务 2.收集各个组员的进度 3.写博客 展示GitHub当日代码/文 ...

  8. linux常用命令指南——查找文件我最强：find

    2.3.2 查找文件我最强:find 2.3.2.1 find查找常用命令示例 find / -name 'wfy.txt' # 从根目录下开始查找文件wfy.txt find . -name '*f ...

  9. 分布式SQL数据库中部分索引的好处

    在优锐课的java学习分享中,探讨了分布式SQL数据库中部分索引的优势,并探讨了性能测试,结果等. 如果使用局部索引而不是常规索引,则在可为空的列上(其中只有一小部分行的该列不具有空值),然后可以大大 ...

  10. #3145. 「APIO 2019」桥梁

    #3145. 「APIO 2019」桥梁 题目描述 圣彼得堡市内所有水路长度总和约 282 千米,市内水域面积占城市面积的 7%.--来自维基百科 圣彼得堡位于由 \(m\) 座桥梁连接而成的 \(n ...