Question

如何在前面制作.highlight？

<body>
    <p>bla bla</p>
    <p class="light">hightlihgt this</p>
</body>

CSS

body{
    background-color: rgb(0, 0, 0);
opacity: 0.35; /* Safari, Opera */
-moz-opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 20;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}

p{
    color: #fff;
}

Answer 1

您可以在顶部使用带有弹出元素的overlay元素：

div#overlay{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.6);
  z-index:999;
}
div#popup{
  width:300px;
  height:200px;
  position:fixed;
  left:50%;
  margin-left:-150px;
  top:50%;
  margin-top:-100px;
  background-color:#fff;
  z-index:1000;
}

使整个页面变暗但突出显示某个区域

1 个答案: