css一个图片上面加上遮罩蒙板，只修改img的样式不多写标签

可以在伪类上添加

图片的url

<image src="XXXXX" mode="widthFix" class="previewUrl cover-mask"/>

.date-list .info .previewUrl{

width: 320rpx;

height: 195rpx;

border-radius: 16rpx;

}

.date-list .info .cover-mask{

position:relative;

overflow: hidden;

}

.date-list .info .cover-mask:after{

content:'';

position: absolute;

top:0;

width: 320rpx;

height: 195rpx;

background-color: rgba(0, 0, 0, 0.4);

}

css一个图片上面加上遮罩蒙板，只修改img的样式不多写标签相关推荐

Android 图片合成：添加蒙板效果不规则相框透明度渐变效果的实现
Android 图片合成:添加蒙板效果不规则相框透明度渐变效果的实现暂时还未有时间开发这效果,所以先贴出来. 先贴一张效果图,这是一张手机截屏: 左上方的风景图:背景图片右上方的人物图:前景图 ...
Android中用图片自定义一个进度条（实现蒙板效果）
问题概述对于进度条我相信大家不陌生,这里我就不再多说什么了.因为这个不是重点.我们要说的是如何去自定义一个不一样的进度条.这里用到两张图片(背景和前景),其实是三张(背景.前景和蒙图).当我们的蒙图 ...
必应每日壁纸API HTML 使用必应每日API为背景 css 背景图片加模糊遮罩
必应每日壁纸API 必应每日壁纸接口API https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh ...
php打印文字到图片,【PHP】打开一个图片然后加上水印（图片上生成文字）
1.自动生成图片,在图片上生成文字 Header("Content-type: image/gif"); //设置Header,如果输出图片不成功,请先暂时去掉这代码查看错误 $i ...
css实现图片自动渐变切换、element-plus 的修改el-table的（边框线为虚线、表头样式）
首先放几张图片 <div id="slideshow"><img src="@/assets/banner-one.png" alt=&qu ...
AndroidStudio_安卓原生开发_自定义蒙板弹出框WaitDialog---Android原生开发工作笔记134
android在执行程序过程中,很可能会用到,正在执行的提示.下面我们就自己做一个提示框,自带蒙板,执行过程中,后面的窗口内容不能操作. 下面的代码可以直接复制粘贴使用: 1.首先写一个WaitDia ...
css中在图片上加透明,css 给图片添加滤镜效果，透明层毛玻璃效果
我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果原图添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...
博客园修改页面显示样式css
博客园修改页面显示样式css 一.总结二. 博客园修改页面显示样式css 1.点管理 2.点设置 3.在页面定制css代码中加入你想要改变样式的css代码即可不会写css的下面有代码示例,直接复制 ...
css如何实现鼠标移至图片上显示遮罩层及文字
css如何实现鼠标移至图片上显示遮罩层及文字问题:一张图片当鼠标移动到上方时,会显示一个遮罩层,并且显示一些提示文字 html: <div class="contentimg&quo ...

css一个图片上面加上遮罩蒙板，只修改img的样式不多写标签

css一个图片上面加上遮罩蒙板，只修改img的样式不多写标签相关推荐

最新文章

热门文章