css pointer-events绝对定位层遮挡的问题解决办法

作者:袖梨 2022-06-25


在没有背景和图片填充的情况下,火狐和Chrome下不能直接点击绝对定位层下面的元素(比如链接),下面的链接被上面的绝对定位层挡住了。在IE里面是可以直接点击绝对定位层下面的链接。

对于这种问题需要用到一个css3的属性,可以通过给绝对定位的层多加一个样式 pointer-events:none; 以后, 绝对定位层下的元素就可以点击了。

光给绝对定位的层添加pointer-events:none; 的样式是不够的,你可以发现所有在此层里的元素,都不能点击了,就连链接和按钮也同样不起作用,所以我们需要给绝对定位层中的其他非空的元素把样式再返回。
给里面的元素重新设置为 pointer-events:auto,只给需要操作的元素区域设置即可。

查看演示页面

pointer-events属性有很多值:

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

下面介绍一下pointer-events这两个属性值详细描述
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
其它属性值为SVG专用,这里不再多介绍了。

对于浏览器兼容的问题:Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性。


例子

 代码如下 复制代码







圆角的css (Rounded Corner)



 


盒装阴影的css (Box Shadow)



 

 

     

-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的,都有4个参数,含义分别为:x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。


  

IE 6~8使用其独有的滤镜,需要设置三个参数:offX(X轴偏移值)、offY(Y轴偏移值)、Color(阴影颜色)。


   

线性渐变的css (Gradient)



 

   

     

      
-moz-linear-gradient

           
-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

       

     

      
-webkit-gradient

           
-webkit-gradient是webkit引擎对渐变的实现,一共有五个参数。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(辐射渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

       

     

      
DXImageTransform.Microsoft.gradient

           
IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。

       

   


透明的css (Opacity)



 

    


旋转的css (rotation)



 

   

     

除了IE以外,其他浏览器都是用rotate函数,实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度(degree)。


       

IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数,前四个参数需要自行计算三角函数,然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation),其中的rotation表示旋转角度,如果顺时针旋转7.5度,则rotation就为7.5;第五个参数SizingMethod表示重绘方式,'auto expand'代表自动扩展到新的边界。


       

除了这个滤镜,IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1,2,3,0,分别表示顺时针选择90度、180度、270度和360度。


   


服务器端字体的css (font-face)


   

  

第一行代码:


  

font-family: 'MyFont';


  

表示为这种字体起一个名称,可以随意设置,我这里用的是MyFont。


  

src: url('myfont.eot');


  

这一行表示字体位置,由于ie只支持服务器端的eot字体,所以这一行是ie专用的。


  

src: local('myfont.ttf'),
 url('myfont.woff') format('woff'),
 url('myfont.ttf') format('truetype');


  

local()表示在本机(客户端)查找该字体,如果本机已经安装了,就不用下载了。url()表示字体在服务器上的位置,format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体,Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器(sarif,opera、chrome),目前好像只支持truetype。


  

然后,使用的时候这样写就可以了。


  

h2{ font-family: "MyFont"; }


  

需要注意的是,字体文件必须与网页文件来自同一个域名,符合浏览器的"同源政策"。另外,由于中文字体文件太大,服务器端字体显然只适用于英文字体。


   


相关文章

精彩推荐