html在图片上弹出遮罩层半透明,css实现遮罩层，父div透明，子div不透明

使用元素的opacity 属性，设置遮罩层的效果， 主要 样式是：background-color: #ooo; opacity:0.3;

原因分析： 使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用，不过有个方法可以实现，大家可以看看。

可以使用一张透明的图片做背景可以达成效果，但是有没有更简单的方法呢？使用RGBA。

解释：这是黑色半透明的代码(设置背景色 同时设置opacity(透明度，取值范围0-1))

前三个值表示颜色的red,green,blue值

最后一个表示alpha值，就是透明度值，不透明为1

(支持IE8+以及所有现代浏览器)

父级div 使用rgba ,效果可以了，如下图；

怎么实现父级div透明，子div不透明呢？下面这个代码片段还可以参考：

css外层DIV半透明内层div不透明-弹出层效果的实现【实例】

function closeDiv(divId){

document.getElementById(divId).style.display = 'none';

}

function displayDiv(divId){

document.getElementById(divId).style.display = 'block';

}

效果如下图：

CSS常用遮罩层

为什么80%的码农都做不了架构师?>>>   CSS常用遮罩层 应用场景: 上传了一张图片,鼠标移入到图片上的时候显示遮罩层,并且提示点击删除. 通过改变遮罩层的透明度来实现显示隐藏 ...

html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果

模态框: html部分: 弹出框&lt ...

CSS+DIV：父DIV相对定位+子DIV绝对定位

如何在一个div内将一个div进行绝对定位呢?很简单,把父div的position属性设为relative,子div的position属性设为absolute就可以了... 示例:

css 父div如何包裹带有float属性的子div,float子div如何撑开父div

来自网络摘抄 原始代码

Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

<%@ page language="java" pageEncoding="UTF-8"%> ...

【html】【8】div布局&lbrack;子div在父div居底&rsqb;

从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

css hover遮罩层

马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的. 最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额 ...

前端小结(3)---- 添加遮罩层，并弹出div

有如下div: