css鼠标移动到上出现遮罩?css如何实现鼠标移至图片上显示遮罩层及文字
一、css如何实现鼠标移至图片上显示遮罩层及文字
方法一:鼠标移至图片上显示遮罩层及文字
1、先看下html,一个img图片控件,和一个有mask样式的div,里面有文字,这个就是遮罩层。
2、然后看下样式定义,先看下图片容器和图片的样式,如图,其中要注意的是img_container样式里定义了position:relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。
3、再看下遮罩层的样式定义,代码如图,其中需要注意的是他的定位样式,我们设置了absolute的绝对定位,另外还有半透明的background样式设置:
background:rgba(0,0,0,0.7);
可以通过修改后面的0.7这个数字来改变透明度。1为完全不透明,0为完全透明。
4、接着添加鼠标移动上去显示遮罩层的脚本代码。这个js代码用jquery来写,方便,简单一点,所以我们先引入jquery脚本库。
5、添加mouseover,mouseout事件,主要就是当鼠标移动到图片容器上时,显示遮罩层,移出时,隐藏遮罩层。
6、刷新页面,可以看到现在页面上是正常显示的图片。
7、当我们把鼠标放上去时,就显示了遮罩层了。
方法二:鼠标移动至图片,图片慢慢放大显示遮罩层及文字
1、创建外层div和商品图片。
2、设置其样式,这里都是一些基本简单的属性。*{}里面的margin和padding都设置为0,是因为浏览器对元素之间有默认的属性,如果不消除,将影响我们后面css部分属性的设定。
3、运行,查看效果。可以看到,图片在div的上面,并且于div一样大。
4、为图片增加,鼠标移入时就放大的动画。这里运用到的是css3的transform属性,设置动画的一种方式,也比较方便快捷。对于scale缩放属性,代码上有详细注释。
5、运行,查看动画效果。可以看到,此时的图片是以图片中心放大,而超出了div的范围。那么我们接下来解决这一问题。
6、为外层div设置overflow属性,使超出的部分全都隐藏。
7、运行,查看动画效果。可以看到当鼠标移上去时,图片慢慢放大,但大小始终不变,就是div的大小,那么此时外层的div就起到了相框的效果。
8、接下来增加遮罩和文字。注意全部都放到div里面,图片、遮罩、文字都为同级元素,外层div为它们的父元素。
9、为外层div添加作为父元素的相对定位属性。为遮罩设置样式及动画。为文字设置样式及动画。如图,部分属性有注释,并解释了动画效果。
10、运行,查看最终效果。图片逐渐变大,黑色半透明遮罩逐渐显现,文字逐渐从下方移到图片中间位置,严格来说是移动到外层div的中间位置。
二、css如何给图片加一个蒙版遮罩
1.首先,看一下HTML,一个img图像控件和一个带有样式的div,其中包含文本。这个就是蒙版遮罩层。
2.然后,查看样式定义。先检查图像容器和图像样式,如图所示。其中要注意的是img_container样式里定义了position:relative,这个主要是为了遮罩层做绝对定位做准备的。
3.接着,查看遮罩层的样式定义。该代码如图所示。
背景:rgba(0,0,0,0.7);
可以通过修改以下数字0.7来更改透明度。 1是完全不透明的,0是完全透明的。
4.随后,添加用于鼠标移动的脚本代码以显示遮罩层。该js代码是用jquery编写的,既方便又简单,因此首先介绍jquery脚本库。
5.然后,添加mouseover和mouseout事件,主要是当鼠标移到图像容器时显示遮罩层,并在鼠标移出时隐藏遮罩层。
6.刷新页面,可以看到页面上显示的普通图片。
7.最后,可以看到当鼠标放在图片上时,将显示遮罩层。
三、如何用css实现半透明遮罩层效果
1、半透明效果可以使用 css3中的 opacity属性,在低版本的IE浏览器中使用IE的alpha滤镜。代码:
.opacity{
opacity:0.3; filter: alpha(opacity=30); background-color:#000;}
2
、要覆盖整个可视区域通常的做法是:
html,body{ height:100%}
.mask{height:100%;width:100%;}
但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的,在其他浏览器中首屏以下的没能被遮盖住,为了兼容其他浏览器我们可以使用position:fixed;
来解决这个问题
完整的代码:
<div class="mask opacity"></div>
html,body{ height:100%; margin:0; padding:0}
.mask{height:100%;
width:100%; position:fixed; _position:absolute; top:0; z-index:1000;}
.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000;
}
给你一个例子:
<!DOCTYPEhtml>
<html>
<head>
<meta
charset="gb2312"/>
<title>背景半透明覆盖整个可视区域</title>
<style>
html,body{height:100%;margin:0;padding:0;
font-size:14px;}
p{line-height:18px;}
.mask{height:100%;width:100%;
position:fixed;_position:absolute;top:0;z-index:1000;}
.opacity{
opacity:0.3;filter:alpha(opacity=30);background-color:#000;}
.content{height:600px;width:800px;overflow:auto;border:2pxsolid#ccc;
background-color:#fff;position:absolute;top:50%;left:50%;margin:-300pxauto
auto-400px;z-index:1001;word-wrap:break-word;padding:3px;}
.ph{
height:1000px;}
</style>
</head>
<body>
<p
class="ph">placeholderheight:1000px;</p>
<divclass="mask
opacity"></div>
<divclass="content">
<h1>背景半透明覆盖整个可视区域</h1>
<p>
这个效果效果在工作中经常会遇到,这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。下面我们通过一个简单的例子看看如何实现,高手请绕道。
</p>
<p>html代码很简单<divclass="maskopacity"></di
v></p>
<p>1、半透明效果可以使用css3中的opacity
属性,在低版本的IE浏览器中使用IE的alpha滤镜。代码:
<code>.opacity{opacity:0.3;
filter:alpha(opacity=30);background-color:#000;}</code></p>
<p>2、要覆盖整个可视区域通常的做法是:<br/>
<code>html,body{
height:100%}</code><br/>
<code>.mask{height:100%;width:100%;}</code><br/>
但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的,在其他浏览器中首屏以下的没能被遮盖住,为了兼容其他浏览器我们可以使用<code>position:fixed;
</code>来解决这个问题</p>
<p>
<strong>完整的代码</strong>:
<pre>
html,body{height:100%;
margin:0;padding:0}
.mask{height:100%;width:100%;position:fixed;
_position:absolute;top:0;z-index:1000;}
.opacity{opacity:0.3;filter:
alpha(opacity=30);background-color:#000;}
</pre>
</p>
<p><strong>参考资料:</strong>
<ahref="">背景半透明最佳实践</a>
<ahref="">垂直居中的几种实现方法</a>
<ahref="">DIV高度100%</a>
</p>
</div>
</body>
</html>