效果图：

代码如下：

<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. Hadoop HA 架构

    为什么要用集群? 企业里面,多台机器 伪分布式 每一个角色都是一个进程 HDFS: NN SNN DN YARN: RM NM 大数据所有组件, 都是主从架构 master-slave HDFS读写请 ...

  2. zhy2_rehat6_mysql01 - 二进制5.7.txt

    mysql 5.7版本的二进制安装方法 export LANG=en_US Centos7 X64 注意:安装完centos7 后,linux需要指定新建一个用户,要求密码强度很高,才能通过,安装系统 ...

  3. npm i xxxx -D和npm i xxxx-S的区别

    npm i xxxx -D 就是 npm i xxxx --save-dev 是把依赖写入进devDependencies对象里面 devDependencies 是开发环境下的依赖,这里是开发环境下 ...

  4. Day11 - Python基础11 模块学习——optparse

    Python 有两个内建的模块用于处理命令行参数: 一个是 getopt,<Deep in python>一书中也有提到,只能简单处理 命令行参数: 另一个是 optparse,它功能强大 ...

  5. LeetCode 5271. 访问所有点的最小时间 Minimum Time Visiting All Points

    地址 https://leetcode-cn.com/problems/minimum-time-visiting-all-points/submissions/ 题目描述平面上有 n 个点,点的位置 ...

  6. 漫长的 windows caffe编译过程 (OnlyCpu)

    在windows下 编译caffe代码. 官方推荐是vs2013 而我手头只有VS2017 .准备开始下载代码开始编译. 1 代码下载 windows版本的代码有两份,一份是官方的编译的windows ...

  7. LG3825/BZOJ4945/LOJ2305 「NOI2017」游戏 dfs+2-SAT

    问题描述 LG3825 BZOJ4945 LOJ2305 题解 发现对于每个地图,如果没有\(A,B,C\)地图不可以使用\(a,b,c\),就是一个\(\mathrm{3-SAT}\)问题. 有了这 ...

  8. <DFS & BFS> 286 339 (BFS)364

    286. Walls and Gates DFS: 思路是,搜索0的位置,每找到一个0,以其周围四个相邻点为起点,开始 DFS 遍历,并带入深度值1,如果遇到的值大于当前深度值,将位置值赋为当前深度值 ...

  9. IT兄弟连 Java语法教程 注释与编码规范

    在程序代码中适当地添加注释可以提高程序的可读性和可维护性.好的编码规范可以使程序更易阅读和理解.下面将介绍Java中的集中代码注释以及应该注意的编码规范. 代码注释 通过在程序代码中添加注释可提高程序 ...

  10. 第一章 1.18 re模块

    方法使用 1. compile(正则表达式) - 编译创建正则表达式对象 re_obj = re.compile(r'\d{3}') re_obj.fullmatch('234') re.fullma ...