使用半透明div覆盖图片的方法

最新推荐文章于 2022-06-13 19:46:51 发布
最新推荐文章于 2022-06-13 19:46:51 发布
阅读量4k 收藏 3
点赞数 1
分类专栏： web 文章标签： 图片 html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32216775/article/details/78468803
版权
在设计批量删除的时候，我遇到了一个问题：就是在选择待删除图片的时候需要有一个半透明层把图片覆盖，然后覆盖层上有选择框可以选择，见下图的前后效果：




我的做法是使用一个div，背景为灰色，透明度为0.8，覆盖在图片上，覆盖的方式是采用绝对定位，覆盖层的div的position属性设置为absolute，而装图片和覆盖层的div的position设置为relative(这一点很重要)
具体代码如下：


<a href="http://www.simchoir.com">君科沃特合唱团官网</a>

qq_32216775
关注
专栏目录
CSS------div无法覆盖图片全部如何处理
weixin_34176694的博客
02-05 359
  如图： 代码：(需要将li中的样式属性display设置为inline-block) //获取Url地址中的参数 function getParameter(name) { //正则表达式 var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)"); var r = window.locati...
【CSS】div的背景图完整图片覆盖
weixin_33843409的博客
06-18 3485
最初的代码： 1 .container_first { 2 width: 100%; 3 height: 100%; 4 background: url(10176581.jpg); 5 background-size: cover; 6 position: relative; 7 } 因为UI交给我的图片是按照iPhone6的尺寸来...
javascript动态设置一个div图层覆盖住另一个div图层，并设置成透明
互联网－从零开始
11-23 1万+
有时候我们在网页上提交数据到后台保存时，希望前台在保存过程中有一个正在保存的提示，这时可以使用一个透明div图层覆盖住编辑数据的图层，并显示等待的图标，表示正在保存中，当前数据暂时不能再编辑了，这种效果对于用户来说比较友好，下面就来总结一下关键的实现技术： 1，创建一个div图层，半透明，并且在初始时不显示 这个采用css就可以实现，并且兼容各大浏览器，如下： CSS代码： #savewa
css图层覆盖
lingongheng
03-25 1830
目标：将两张图片叠放在一起，并有图层区分。方案：z-index:99//数字越大，越靠近顶层
html半透明遮罩,div半透明遮罩效果
weixin_30336075的博客
05-30 1482
css如何实现鼠标移至图片上显示遮罩层及文字1.首先看看HTML、一个img图像控件和一个带掩码样式的div，其中包含文本。这是蒙版层。 2.然后，查看样式定义。首先，查看图像容器和图像的样式，如图所示。这主要是准备我们的绝对定位口罩。 3.看看蒙版层的样式定义。代码如图所示。js如何实现点击图片弹出窗口并放大这张图片,弹出的悬赏币不够了 麻烦大神辛苦点 这是我的作业通过JS代码 document...
在div上覆盖一个图片，想要显示出上面的图片，但不想图片影响鼠标对下面div的操作
Hanxiaomo_的博客
09-17 897
最直接的办法是禁用图片点击事件 css : pointer-events: none; js : img.style.pointerEvents = "none"; div与图片的其他摆放技巧: 用绝对定位让图片脱离标准文档流，浮在div上面 用z-index调整层级显示 用opacity调整透明度来让下面的图片可以透视过来 ...
div背景半透明，覆盖整个可视区域的遮罩层效果
09-25
然而，仅使用 `opacity` 和 `filter` 只能让当前元素本身半透明，并不能让遮罩层覆盖整个可视区域。为了让遮罩层覆盖整个页面，我们通常会设置元素的高度和宽度为100%，即 `height: 100%;` 和 `width: 100%;`。但在...
div+css设置div的背景为半透明的方法
09-25
这样，当".div-a"覆盖在".div-b"上时，就可以看到背景图片的半透明效果。 为了保证代码的兼容性，一般将针对不同浏览器的属性从上到下依次放置在CSS规则中，浏览器会按照其顺序解析，直到找到可识别的属性。例如，...
CSS实现让文字半透明显示在图片上的方法
09-25
同时，为了使文字不覆盖图片，可以使用`z-index`属性来控制层叠顺序，确保文字层在图片层之上。 为了使文字半透明，我们可以利用`opacity`属性。但是，由于IE6-8不支持`opacity`，所以我们需要为这些旧版本的浏览器...
jQuery实现的超酷鼠标滑过动态显示半透明内容覆盖图片效果.zip
11-07
在本资源中，我们关注的是一个使用jQuery库实现的交互式网页效果，即当鼠标滑过图片时，会动态显示出半透明的内容覆盖层。这种效果常用于网站的相册展示、产品介绍或任何需要增强用户体验的场景，因为它能提供额外的...
jquery、div、css制作遮挡层
wangjun5159的专栏
06-24 3210
在日常开发中经常会用到遮挡层，一直没有机会研究，今天实现了，感觉原理原来如此简单。不过，这些很小的知识点，必须都弄清楚，基础才能好，才能走的更远。 遮挡层效果图： 遮挡层实现原理：   修改某个隐藏的div样式，由隐藏修改为展现，宽度和高度与浏览器窗口相等。 注意细节：    div需要设置z-index,这个属性，顾名思义，是在y轴上的索引，你可以理解为垂直于屏幕的高度
html白色背景遮罩,div背景半透明，覆盖整个可视区域的遮罩层效果背
weixin_39968852的博客
05-30 1390
如何用css实现半透明遮罩层效果z-index:2000; //使遮罩层在其他层之上 opacity:0.5; //透明度,取值范围 0-1用css，jsp做了一个半透明背景层(遮罩层),参考lo...鼠标移动到菜单栏上下面显示二级菜单，二级菜单有个半透明背景层，目前CSS使用rgba可以使背景色透明文字不透明，你使用的透明会使背景和文字一起透明。CSS遮罩层不能完全遮罩页面母版页和母版页里的内容...
阴影div压在图片效果实现
weixin_43368552的博客
06-13 118
在写一个小栗子的时候遇见的： 可以通过调节阴影div的权重层级大小，来压住图片就能实现阴影div压住图片的效果。 注意：z-index仅能在定位元素上奏效。
div img 覆盖在上面_怎样用CSS +DIV将第二张特定图片覆盖第一张图片的部分区域...
weixin_39953845的博客
12-28 3010
展开全部假设图都是100*100的，实现方式如下：* {margin:0;padding:0}div {position:relative;width:500px; heigth:500px; background:#ccc;}img {display:block;}//第一种#img2 {position:absolute; top:0px; left:0px;}//绝对定位，脱离文档流，这样就...
HTML如何将DIV设置悬浮,如何使用html将一个div覆蓋在另一个div上，让两个div 重合悬浮...
weixin_31111015的博客
06-10 3777
<> _ .wrap{ position:relative; width:300px; margin:50px auto; } .wrap div{ position:absolute; width:200px; height:200px; left:0; :0; opacity:0.5; } .wrap .a{ background:#0a0; } ....
html 图像覆盖图像,图像覆盖（专辑）模板 (HTML)
weixin_31100895的博客
06-08 204
图像覆盖(专辑)模板 (HTML)03/04/2016本文内容[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]定义一个显示唱片集信息(唱片集的图像、有关唱片集的信息以及艺术家)的项。 此模板可以与具有网格布局的 ListView 结合使用。有关更多模板，请参...
div img 覆盖在上面_CSS：如何用img标签覆盖div（如背景图像）？
weixin_39977776的博客
12-28 1842
As discussed here I am trying to get an image to be covered within a div. With just these simple lines I was able to achieve this via background-image:div{width: 172px;height: 172px;border-style: soli...
HTMLcss怎样让文字覆盖在图片上面，图片上加字
热门推荐
mengli1_78m的博客
08-16 3万+
每个方框的html 如下， html css 如何使图片居中且不变形 css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。 其中 display: table-cell; text-align: center; vertical-align: middle; 这3行决定居中效...
div覆盖图片的下一半 让div变成透明模糊的可以看到里面图片的颜色
最新发布
09-26
要实现div覆盖图片的下一半，并让div变为透明模糊的效果，你可以通过CSS混合（CSS blend modes）和伪元素（`:before` 或 `:after`) 来达成。首先，你需要创建一个半透明的模糊背景，然后将其定位在图片下方。这里是一个简单的例子： HTML结构: ```html <div class="mask-image"> <img src="your_image_url" alt="Your Image"> </div> ``` CSS样式: ```css .mask-image { position: relative; overflow: hidden; /* 防止内容溢出 */ } .mask-image img { display: block; width: 100%; /* 或者自适应宽度 */ height: auto; } .mask-image:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; /* 覆盖图片的下半部分 */ background: rgba(0, 0, 0, 0.5); /* 半透明黑色作为模糊效果基础 */ backdrop-filter: blur(8px); /* 添加模糊效果，数值根据需要调整 */ } ``` 在这个例子中，`.mask-image:before` 伪元素设置了半透明黑色背景并添加了模糊效果，使得div下面的部分变得模糊且能看到图片的颜色。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值