Question

我有一个页面，我需要调暗某个区域（div）而不是整个页面。我怎样才能做到这一点？

我已经搜索了一些答案，但所有这些都是关于调整整个页面。下面是我得到的示例代码，但它使整个页面变暗。

<div id="dimmer"></div> 

#dimmer
{
    background:#000;
    opacity:0.5;
    position:fixed; /* important to use fixed, not absolute */
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:9999; /* may not be necessary */
}

Answer 1

.area-to-dim {
  position: relative;
}

.dimmer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
}

<强> HTML

<div class="area-to-dim">
  <div class="dimmer"></div>
</div>

Answer 2

两种方式，一种非常简单，但我不能100％确定这是你想要的。

首先，使用CSS

.genericClassGivenToDivs, #idOfDiv {
    background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
    background:#aaa;
}

第二种方式更复杂。基本上，在鼠标悬停时使用javascript重新定位div。这需要一些CSS和JavaScript。通过一些工作，以下内容可能会更加清晰。

<html>
<head>
<style>
body {
    margin:1em;
    background:#ddd;
}
#contain {
    margin:auto;
    width:100%;
    max-width:720px;
    text-align:center;
}
#row1, #row2, #row3 {
    width:100%;
    height:48px;
    line-height:48px;
    color:#000;
    background:#fff;
}
#row2 {
    background:#eee;
}
#dim {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
    //console.log('over:['+ this.id +']');
    dimEl.style.top = this.offsetTop +'px';
    dimEl.style.left = this.offsetLeft +'px';
    dimEl.style.height = this.offsetHeight +'px';
    dimEl.style.width = this.offsetWidth +'px';
    dimEl.style.display = 'block';
}
window.onload = function() {
    var list = ['row1', 'row2', 'row3'];
    var e;
    for(x in list) {
        e = document.getElementById(list[x]);
        if (e) {
            e.onmouseover = over;
        }
    }
}
</script>
</body>
</html>

Answer 3

不完全确定＆＃34;调暗某个区域＆＃34;意思是，但我最近创建了一个可能在某种程度上适用的解决方案。

我有一个带有背景图像和一些重叠文本的div，并且鼠标悬停时背景（但不是文本）会略微变暗。

我通过两个容器和一个文本字段解决了这个问题，因此最外面的div有背景图像，内部div扩展到100％高度和宽度，并且有一个透明的黑色纯色背景，然后有一些文本在那个div。

然后，简单地说，在悬停时，我将内部div背景颜色从rgba(0, 0, 0, 0)更改为rgba(0, 0, 0, .3)，使背景图像变暗。

如果这听起来合适，请参阅this jsFiddle

Answer 4

为什么显示器没有？

检查一下？

#dimmer {
  background: #111;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  z-index: 9999;
  /* may not be necessary */
}
#dimmer:hover {
  background: #000;
  opacity: 0.5;
  transition: opacity 1s ease;
  cursor: pointer;
}

<div id="dimmer">ok</div>

Answer 5

它覆盖了整个页面，因为您将宽度和高度设置为100％。如果你把它设为100px或50％，那就行了，但如果你把它设置为100％，它将覆盖100％的页面。

如何“调暗”网页中的某些区域

5 个答案: