css为图片添加一层蒙版并在上层显示文字等

效果图:

代码如下:

<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>

原文地址:https://www.cnblogs.com/yechangzhong-826217795/p/11751192.html

时间: 2024-10-09 21:47:52

css为图片添加一层蒙版并在上层显示文字等的相关文章

如何使用CSS给图片添加双边框效果

如何使用CSS给图片添加双边框效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.给图片添加双边框也在实际使用中也有许多应用,可能并不频繁,在这里简单介绍一下如何实现此种效果,借以对CSS一些属性的应用加以熟练.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

使用CSS为图片添加边框的几种方法

css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果 通过使用带有一些padding之的背景图来添加阴影效果. HTML <img class=”shadow” src=”sample.jpg” alt=”" /> CSS img.shadow { background: url(shadow-1000×1000.gif) no-repeat right bottom; padding: 5px 10px 10px 5p

图片添加透明度蒙版

看了很多图片上添加透明度的文章,大部分都是围绕 opacity: 这个属性来做的,但是实际项目中,该效果会影响到图片里面的字段,或者是 -webkit-mask: 这个需要配合渐变或者其他来实现,而且以白色半透明为主.如果我们需要的是黑色半透明呢,以下是我个人的的一些写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title>

css 给图片添加滤镜效果,透明层毛玻璃效果

我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果 原图 添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filter:sepia(2); } img:hover{ filter:none; } 给色度添加饱和度可以用saturate() filter: saturate(4); 如果不希望把图片调成橙黄色调也可以添加hue-rotate滤镜,变成稍深的亮粉色,大约295度 filter:sepia(1) sa

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

CSS之图片压盖效果案例分析

CSS之图片压盖效果案例分析 最近在做某个网站的静态页面,发现有很多图片压盖效果的布局,特来记录一下布局技巧. 碰到这种布局你会怎么做: 第一反应肯定是浮动,没错,可以把这几个图片放在ul列表的li标签里,给每个li标签内添加img和文字.如: <ul> <li> <img src="" alt=""><p>文字</p></li> <li><img src="&quo

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果: 从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗. 很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了.如果你是这一部分人,我也希望你停下脚步,看看这篇教程.因为在今天这篇教程中,我会用另一个思维方式来思考问题,我

python脚本实现自动为png类型图片添加@2x后缀

@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/css/cuteeditor.css); @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/css/cuteeditor.css); 美术们总是忘记或者因为其它

第二天——UM编辑器布置以及图片添加

今天是第二天,我早上起来开始尝试实现使用UMeditor文本编辑器添加图片,弄了一天,终于弄好了!其实早就应该弄好的,但是我没有导入jar包,所以不能实现图片的上传,我也是够蠢的.现在我就来总结一下图片的上传吧: 1.从“百度编辑器”官网上下载UM编辑器 2.将其解压到任意位置,解压后文件夹内的内容有以下几个: 其中那个index.html可以删除,那是个例子,如果不会部署可以参照一下,我之前就是参照这个的. 3.将这个文件夹拷到自己的web项目底下 4.现在就是导jar包,引入js.css文件