效果图：

代码如下：

<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. Data Management Technology(5) -- Recovery

    Recovery Types of Failures Wrong data entry Prevent by having constraints in the database Fix with d ...

  2. CheckBoxList选中某项，获取其它项是否是选中

    <div class="formControls col-xs-8 col-sm-9" style="margin-top:-15px;" id=&quo ...

  3. [靶场实战]：SQL注入-显错注入

    SQL注入的本质:就是将用户输入的数据当作代码带入执行. 注入条件: 1.用户能控制输入 2.能够将程序原本执行的代码,拼接上用户输入的数据进行执行 首先检查是否存在注入点 Rank1: 构造语句 ? ...

  4. Mybatis整合Redis实现二级缓存

    Mybatis集成ehcache . 为什么需要缓存 拉高程序的性能 . 什么样的数据需要缓存 很少被修改或根本不改的数据 业务场景比如:耗时较高的统计分析sql.电话账单查询sql等 . ehcac ...

  5. LeetCode 1244. 力扣排行榜

    地址 https://www.acwing.com/solution/LeetCode/content/5765/ 题目描述新一轮的「力扣杯」编程大赛即将启动,为了动态显示参赛者的得分数据,需要设计一 ...

  6. Win32 程序开发：创建一个应用程序窗口

    一.创建一个应用程序窗口 代码如下: // 头文件 #include <windows.h> // 全局变量 WCHAR g_lpszClassName[] = L"CLASSN ...

  7. npm ERR! code ENOLOCAL

    Microsoft Windows [版本 ] 版权所有 (c) Microsoft Corporation.保留所有权利. G:\vue>cnpm i vue-router -S 'cnpm' ...

  8. vscode源码分析【一】从源码运行vscode

    安装git,nodejs和yarn 安装Python27,3.x版本的不行,确保它在你的环境变量里: 安装gulp npm install --global gulp-cli 安装windows bu ...

  9. csrf攻击与csrf防御

    CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站 ...

  10. activiti5初识

    因工作需要,接手新的项目,其中用到了activiti实现的工作流,特意去大致学习下,特此记录下. 1.acticiti5框架说明及表结构介绍 Activiti5工作流引擎框架: 它实际上是一个java ...