如何用css实现半透明遮罩层效果

html-css026

如何用css实现半透明遮罩层效果,第1张

1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:

.opacity{

opacity:0.3filter: 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:0padding:0}

.mask{height:100%

width:100%position:fixed_position:absolutetop:0z-index:1000}

.opacity{ opacity:0.3filter: alpha(opacity=30)background-color:#000

}

给你一个例子：

<!DOCTYPE html> 

<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:2px solid #ccc 

background-color:#fff position:absolute top:50% left:50% margin:-300px auto 

auto -400px z-index:1001 word-wrap: break-word padding:3px} 

.ph{ 

height:1000px} 

</style> 

</head> 

<body> 

<p 

class="ph">place holder height:1000px</p> 

<div class="mask 

opacity"></div> 

<div class="content"> 

<h1>背景半透明覆盖整个可视区域</h1> 

<p> 

这个效果效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道。 

</p> 

<p>html代码很简单 < d i v class="mask opacity">< / d i 

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>

<a href="http://zhidao.baidu.com">背景半透明最佳实践</a>

<a href="http://baidu.com">垂直居中的几种实现方法</a>

<a href="http://tieba.baidu.com">DIV高度100%</a>

</p> 

</div> 

</body> 

</html>

渐变: 有规律的渐渐变化,在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上.(替代图片),意义是创建一张图片

gradient可以应用在所有接受图像的属性上

线性渐变(linear-gradient)变化的方向是一条直线

径向渐变(radial-gradient)变化的方向是从圆心向四周运动运动

用于创建一个表示两种或多种颜色线性渐变的图片。

第一个参数可以省略,默认从上往下,

后续每个参数描述某个关键点的位置的颜色,两个关键点之间渐变.

用来展示由原点（渐变中心）辐射开的颜色渐变。

radial-gradient( shape [size ]?[at <position>,]?<color-stop>[,<color-stop>]+)

没有数值范围的时候颜色均分,从圆心开始到矩形最远的点均分颜色,然后绕圆心画圆染色,支持很多很多颜色

实例:

原点放射渐变的图像。它类似于并且采取相同的论据，但它重复无限地在各个方向上停止颜色以覆盖整个容器。

渐变平铺 repeating- 渐变属性

了解一下

给盒子添加阴影表现效果，仿佛有光打到盒子上

和原盒子一样大小，包含border

box-shadow: h-shadow v-shadow blur spread color outset

定义文字的阴影

类似于 box-shadow 不支持缩放和内外阴影，可叠加逗号分隔

阴影叠加: 先渲染前面的，再渲染后面的