效果图：

代码如下：

<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. CSS .css边框属性（border）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Centos7.6 Apache 虚拟机禁止访问IP，允许访问多域名多个虚拟目录设置

    存放配置文件路径 /etc/httpd/conf.d自定义命名,配置文件后缀格式确保 *.conf注:这是两个配置文件,也是两种方法. # 一个WEB目录# 禁止以IP地址形式访问<Virtua ...

  3. go语言设计模式之Concurrency barrier

    barrier.go package barrier import ( "fmt" "io/ioutil" "net/http" " ...

  4. JAVA实现二维码生成加背景图

    pom.xml依赖 <!-- 二维码生成 -->         <!-- https://mvnrepository.com/artifact/com.google.zxing/c ...

  5. DRF--路由组件和版本控制

    路由组件 先来看下我们前面写的路由 from django.conf.urls import url, include from .views import BookModelView urlpatt ...

  6. 请不要嘲笑你身边那些投了P2P的朋友

    在这方面我是非常谨慎的,但依然逃脱不了翻车的命运 这段时间曾经无数大V强烈推荐的懒投资出现大面积逾期,又把这个行业推上了风口浪尖,这里讲一讲我的故事 对于大多数人的理财投资可能是从2013年余额宝的推 ...

  7. plsql基础练习题

    1.键盘输入一个年份,判断是否是闰年; (能被4整除而不能被100整除或者能被100和400同时整除,满足其一即可); 方法1 declare v_year number(4):=&请输入一个 ...

  8. php laravel请求处理管道（装饰者模式）

    laravel的中间件使用了装饰者模式.比如,验证维护模式,cookie加密,开启会话等等.这些处理有些在响应前,有些在响应之后,使用装饰者模式动态减少或增加功能,使得框架可扩展性大大增强. 接下来简 ...

  9. go语言中map每次遍历的顺序不同-问题分析

    WHAT? 发现下面这段代码,多次运行出的结果是不一样的 mapper := make(map[int]string) mapper[1] = "1" mapper[2] = &q ...

  10. javaScript之基础介绍

    前言一:javascript历史背景介绍 布兰登 • 艾奇(Brendan Eich,1961年-),1995年在网景公司,发明的JavaScript. 一开始JavaScript叫做LiveScri ...