css盒子遮罩层显示与隐藏

实现效果要如图显示：

素材：两张图片
步骤一：制作一个盒子，记住它的尺寸和大小
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子遮罩层的显示与隐藏</title><style>.box {width: 444px;height: 320px;margin: 100px auto;background-color: salmon;}</style>
</head>
<body><!-- 步骤一：制作一个盒子出来 --><div class="box"></div>
</body>
</html>

运行结果如下：

第二步:盒子里面放置一张图片，尺寸跟盒子100%对齐就可以了。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子遮罩层的显示与隐藏</title><style>.box {width: 444px;height: 320px;margin: 100px auto;background-color: salmon;}.box img {width: 100%;height: 100%;}</style>
</head>
<body><!-- 步骤一：制作一个盒子出来 --><div class="box"><img src="data:images/img.jpg" alt=""></div>
</body>
</html>

运行结果如下:

第三步：设置遮罩层盒子。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子遮罩层的显示与隐藏</title><style>.box {width: 444px;height: 320px;margin: 100px auto;background-color: salmon;}.box img {width: 100%;height: 100%;}.box .mask {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;}</style>
</head>
<body><!-- 步骤一：制作一个盒子出来 --> <div class="box"><!-- /* 步骤二：盒子里面放置图片 */ --><img src="data:images/img.jpg" alt=""><!-- /* 步骤三：盒子里面放置遮罩层 */ --><div class="mask"></div></div>
</body></html>

运行结果如下：

步骤四：目前是标准流盒子，所以上下排布，我们把遮罩层设置为绝对定位，就好了
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子遮罩层的显示与隐藏</title><style>.box {width: 444px;height: 320px;margin: 100px auto;background-color: salmon;}.box img {width: 100%;height: 100%;}.box .mask {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;position: absolute;top: 0;left: 0;}</style>
</head>
<body><!-- 步骤一：制作一个盒子出来 --> <div class="box"><!-- /* 步骤二：盒子里面放置图片 */ --><img src="data:images/img.jpg" alt=""><!-- /* 步骤三：盒子里面放置遮罩层 */ --><div class="mask"></div></div>
</body></html>

运行结果如下:

步骤五：因为我们要在父盒子里面全屏显示的话，要设置子绝父相呀。给父亲加上相对定位试试。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子遮罩层的显示与隐藏</title><style>.box {width: 444px;height: 320px;margin: 100px auto;background-color: salmon;position: relative;}.box img {width: 100%;height: 100%;}.box .mask {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;position: absolute;top: 0;left: 0;}</style>
</head>
<body><!-- 步骤一：制作一个盒子出来 --> <div class="box"><!-- /* 步骤二：盒子里面放置图片 */ --><img src="data:images/img.jpg" alt=""><!-- /* 步骤三：盒子里面放置遮罩层 */ --><div class="mask"></div></div>
</body></html>

运行结果如下：

步骤五:设置成鼠标滑过盒子的时候遮罩层出现。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子遮罩层的显示与隐藏</title><style>.box {width: 444px;height: 320px;margin: 100px auto;background-color: salmon;position: relative;}.box img {width: 100%;height: 100%;}.box .mask {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;position: absolute;top: 0;left: 0;/* 先让遮罩层隐藏 */display: none;}/* 鼠标滑过盒子的时候遮罩层出现 */.box:hover .mask {display: block;}</style>
</head>
<body><!-- 步骤一：制作一个盒子出来 --> <div class="box"><!-- /* 步骤二：盒子里面放置图片 */ --><img src="data:images/img.jpg" alt=""><!-- /* 步骤三：盒子里面放置遮罩层 */ --><div class="mask"></div></div>
</body></html>

运行结果如下：

css盒子遮罩层显示与隐藏相关推荐

CSS半透明遮罩层 and 定位
html  <div class="mask" style="display: none;"></d ...
小程序制作自定义弹层添加弹层显示和隐藏动画父组件与子组件（自定义组件）之间传值
0.说明与效果本文打算用一个具体的例子,总结下这些开发过程中学习到的知识: 1.制作自定义组件,并在页面中引用 2.自定义组件的内容是一个表单弹层,添加弹层在弹出和隐藏时的动画 3.展示父组件与子组 ...
纯css制作遮罩层特效
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做.下面是用纯css制作的遮罩层效果: 原始页面,放了三张图片: ...
CSS一元素的显示与隐藏
元素的显示与隐藏类似网站广告,当我们点击就不见了,但是重新刷新页面,会重新出现. 本质:让一个元素在页面中隐藏或者显示出来. 常用的三种方法:display.visibility.overflow ...
CSS的元素的显示与隐藏
CSS的显示与隐藏 CSS中元素标签的显示与隐藏可以通过对元素的css样式编写的过程中,在元素样式下以三种不同的属性进行显示与隐藏,通过对html标签进行显示与隐藏,从而实现web中特定的功能,例如: ...
css hover遮罩层效果
运用css方法达到鼠标移入文字消失,图片占满,遮罩层展示. 用到了transition (过渡). position(定位).opacity(透明度)等效果图 html <div class= ...
css实现遮罩层高斯模糊，毛玻璃效果
突然设计搞了一种想法,当遮罩层谈起来的时候,能不能搞一种模糊让用户看不清遮罩层下面的内容然后ui小姐姐说,要是做不出来就不做了,我说能做出来,怎么能让ui小姐姐看不起呢先看下加模糊滤镜之前的效 ...
extjs ajax 遮罩层,[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
前言 Load Mask(遮罩)效果,就是在页面还没有完全显示出来之前, 加上一个转装转的效果. 类似: 添加这样的效果有两个好处: 1. 在页面没完全show出来之前, 把后面的页面给遮罩起来, 防 ...
css标签折行显示溢出隐藏,css 文本自动换行和超出隐藏
强制不换行 div{ //white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 white-space:nowrap; } 超出 ...

css盒子遮罩层显示与隐藏

css盒子遮罩层显示与隐藏相关推荐

最新文章

热门文章