用div+css 如何 固定位置遮罩

html-css045

用div+css 如何 固定位置遮罩,第1张

嘿嘿，你的分，我吃了！我不明白你说那遮罩的位置在哪？不知道我这么放可对？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot>

<html xmlns="http://www.w3.org/1999/xhtml&quot>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.box{ width:400px background:#eeeeee}

.box:after{ content:"" clear:both display:block}

.box1,.box2,.box3,.box4{float:left width:200pxheight:40px}

.box4{ position:relative}

.box4 .son{ position:absolute width:200px height:30px background:#ccc}

</style>

</head>

<body>

<div class="box">

<div class="box1" style=""><input type="text" value="1" /></div>

<div class="box2"><input type="text" value="2" /></div>

<div class="box3"><input type="text" value="3" /></div>

<div class="box4">

<div class="son">遮罩放这里？</div>

<input type="text" value="4" />

</div>

</div>

</body>

</html>

css代码

<style>

.div{

position:absolute

left:50

top:70

width:150

}

.img{

position:absolute

top:20

left:40

filter:alpha(opacity=80)

}

</style>

页面代码

<div>

<p>

<font class="textShadow">选择公文

</font>

<font class="textsd">leaf

</font>

</p>

<p style="font-size:48font-weight:boldcolor:red">

Beautiful </p>

<p><img src="web/7.jpg" style="position:absolute

top:20

left:40

filter:alpha(opacity=0,finishopacity=100,

style=1,startx=0,starty=85,finishx=150,finishy=85)" ></p>

</div>

效果图：