Question

我创建了一个简单的网站，其中背景中的图像具有0.3不透明度，并且还有背景颜色。最重要的是一些文字。这是HTML：

如果我使位置相对，则文本不受图像不透明度的影响。如果我不使它相对，它会受到不透明度的影响。我只是想知道为什么相对定位会产生这样的效果。

.bg-1 {
  width: 100%;
  height: 80vh;
  background: url(img/keyboard.jpg) no-repeat center center;
  background-position: top;
  background-size: cover;
  opacity: .3;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#welcome {
  padding-top: 15px;
  color: #66FCF1;
  z-index: 1;
  position: relative;
  /*this is the point of concern*/
}

.first {
  width: 100%;
  height: 80vh;
  background-color: black;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid first text-center">
  <div id="welcome">
    <p class="welcomeSize">Welcome!</p>
  </div>
  <div class="bg-1">
    <!--the bg image with opacity-->
  </div>
</div>

Answer 1

您所看到的是z-index。即使您z-index上已有#welcome，但只有z-index static属性才会生效，直到您向该元素添加非position z-index position: relative。因此，添加z-index会激活#welcome上的#welcome，将.bg-1置于$disk = Get-AzureRmDisk -ResourceGroupName $rgName -DiskName $diskName之上而不是$location = "brazilsouth" $snapshot = New-AzureRmSnapshotConfig -SourceUri $disk.Id -CreateOption Copy -Location $location之后。

Answer 2

默认情况下，元素按照html中指定的顺序加载。在这种情况下，您的fixed元素会在之后（因此在您的relative元素之上加载。

同样，z-index is only applied to positioned elements（即absolute，position:relative和z-index）。当您应用#welcome时，您正在触发要应用的capabilities()["profmem"] ## profmem ## TRUE，并“提升”背景图片上的n <- 100000 p <- 100 X <- matrix(rnorm(n*p), nrow = n, ncol = p) object.size(X) ## 80000200 bytes ## No copies / no new objects bar <- function(X) X foo <- function(X) bar(X) ## One new object bar2 <- function(X) 2*X foo2 <- function(X) bar2(X) profmem::profmem(foo(X)) ## Rprofmem memory profiling of: ## foo(X) ## ## Memory allocations: ## bytes calls ## total 0 profmem::profmem(foo2(X)) ## Rprofmem memory profiling of: ## foo2(X) ## ## Memory allocations: ## bytes calls ## 1 80000040 foo2() -> bar2() ## total 80000040元素

为什么相对定位会消除不透明度？

2 个答案: