Question

我有网站的开发和生产版本。因为它们看起来相同，所以我想在开发版本上放置一个透明的覆盖层，在4个角中的每个角上都带有白色文本。文本的每个角都显示为“ DEV MODE”。当用户滚动时，带有文字的叠加层应始终显示在每个角上。

仅显示文本的左上角div。有人可以帮忙吗？

.wrap {
  position: relative;
  height: 100%;
}

div.fadeMe {
  opacity: 0.7;
  filter: alpha(opacity=20);
  background-color: #000;
  width: 100%;
  height: 1000px;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
  pointer-events: none;
}

.fadeMe .wordsTL {
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(0, 0, 0);
  /* Fallback color */
  background: rgba(0, 0, 0, 0.5);
  /* Black background with 0.5 opacity */
  color: #f1f1f1;
  /* Grey text */
  width: 100%;
  /* Full width */
  padding: 20px;
  /* Some padding */
}

.fadeMe .wordsBL {
  position: absolute;
  /* Position the background text */
  left: 0;
  bottom: 0;
  background: rgb(0, 0, 0);
  /* Fallback color */
  background: rgba(0, 0, 0, 0.5);
  /* Black background with 0.5 opacity */
  color: #f1f1f1;
  /* Grey text */
  width: 100%;
  /* Full width */
  padding: 20px;
  /* Some padding */
}

.fadeMe .wordsTR {
  position: absolute;
  /* Position the background text */
  top: 0;
  right: 0;
  background: rgb(0, 0, 0);
  /* Fallback color */
  background: rgba(0, 0, 0, 0.5);
  /* Black background with 0.5 opacity */
  color: #f1f1f1;
  /* Grey text */
  width: 100%;
  /* Full width */
  padding: 20px;
  /* Some padding */
}

.fadeMe .wordsBR {
  position: absolute;
  /* Position the background text */
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0);
  /* Fallback color */
  background: rgba(0, 0, 0, 0.5);
  /* Black background with 0.5 opacity */
  color: #f1f1f1;
  /* Grey text */
  width: 100%;
  /* Full width */
  padding: 20px;
  /* Some padding */
}

<div class="wrap">
  <div class="fadeMe">
    <div class="wordsTL">
      <h1>DEV MODE</h1>
    </div>
    <div class="wordsBL">
      <h1>DEV MODE</h1>
    </div>
    <div class="wordsTR">
      <h1>DEV MODE</h1>
    </div>
    <div class="wordsBR">
      <h1>DEV MODE</h1>
    </div>
  </div>
  //Other HTML Page Content behind the overlay
</div>

Answer 1

我建议将<div>与display: flex;一起使用，以完成此操作。

请参阅：https://codepen.io/kboedges/pen/axYroQ

<div class="wrap">
  <div class="dev-overlay">
    <div class="dev-column">
      <div class="dev-row">
        <div class="dev-box">Dev Mode</div>
        <div class="dev-box">Dev Mode</div>
      </div>
      <div class="dev-row">
        <div class="dev-box">Dev Mode</div>
        <div class="dev-box">Dev Mode</div>
      </div>
    </div>
  </div>

  <h1>Page Content</h1>
  Love i want to go outside let me go outside nevermind inside is better All of a sudden cat goes crazy chase dog then run away if it fits, i sits Cat ipsum dolor sit amet, murf pratt ungow ungow. Cough furball into food bowl then scratch owner for a new
  one where is my slave? I'm getting hungry so eat grass, throw it back up or leave fur on owners clothes. Curl up and sleep on the freshly laundered towels pushes butt to face.
</div>

.wrap {
  background: lightpink;
}

.dev-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.dev-column {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.dev-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dev-box {
  background: blue;
  color: white;
  width: 100px;
}

Answer 2

尝试清除您的代码... 我改写了一些零件来解决一些问题。使用位置：用top，left，right和bottom属性固定为全屏覆盖。但是请记住，重叠的内容将不允许与他互动。

.fadeMe {
  position: fixed;
  opacity: 0.7;
  filter: alpha(opacity=20);
  background-color: #000;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.fadeMe [class^="words"] {
  position: absolute;
  padding: 20px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  font-size: 2rem;
}

.fadeMe .wordsTL {
  top: 0;
  left: 0;
}
.fadeMe .wordsBL {
  left: 0;
  bottom: 0;
}

.fadeMe .wordsTR {
  top: 0;
  right: 0;
}

.fadeMe .wordsBR {
  right: 0;
  bottom: 0;
}

<div class="wrap">
	<div class="fadeMe">
		<span class="wordsTL">DEV MODE</span>
		<span class="wordsTR">DEV MODE</span>
		<span class="wordsBL">DEV MODE</span>
		<span class="wordsBR">DEV MODE</span>
	</div>
	//Other HTML Page Content behind the overlay
</div>

Answer 3

只需在每个右侧div上放置text-align: right。

或者，取消所有内部元素的100％宽度规则，让它们适合其内容：

.fadeMe > div {
  display: inline-block;
}

Demo

顺便说一句，您可以使用一个元素（如果不能使用body，则可以使用两个元素。

Demo 2

body::before,
body::after,
.lower-watermarks::before,
.lower-watermarks::after {
  box-sizing: border-box;
  opacity: 0.7;
  filter: alpha(opacity=20);
  width: 50vw;
  height: 70vh;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  padding: 20px;
  content: 'DEV MODE';
  font-size: 2em;
  font-family: arial;
}

body::after {
  left: auto;
  right: 0;
  text-align: right;
}

.lower-watermarks::before {
  top: auto;
  bottom: 0;
  height: 30vh;
}

.lower-watermarks::after {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  height: 30vh;
  text-align: right;
}

<div class="lower-watermarks"></div>

Answer 4

您需要删除每个width: 100%;子级上的.fadeMe设置。

此外，您的.fadeMe div当前具有一个height: 1000px;设置，使其可能比您的窗口更高，因此wordsBL和wordsBR似乎是隐藏的。如果将其高度更改为100%，则透明覆盖层将适当填充窗口。

.wrap {
  position: relative;
  height: 100%;
}

div.fadeMe {
  opacity: 0.7;
  filter: alpha(opacity=20);
  background-color: #000;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
  pointer-events: none;
}

.fadeMe .wordsTL {
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(0, 0, 0);
  /* Fallback color */
  background: rgba(0, 0, 0, 0.5);
  /* Black background with 0.5 opacity */
  color: #f1f1f1;
  /* Grey text */
  padding: 20px;
  /* Some padding */
}

.fadeMe .wordsBL {
  position: absolute;
  /* Position the background text */
  left: 0;
  bottom: 0;
  background: rgb(0, 0, 0);
  /* Fallback color */
  background: rgba(0, 0, 0, 0.5);
  /* Black background with 0.5 opacity */
  color: #f1f1f1;
  /* Grey text */
  padding: 20px;
  /* Some padding */
}

.fadeMe .wordsTR {
  position: absolute;
  /* Position the background text */
  top: 0;
  right: 0;
  background: rgb(0, 0, 0);
  /* Fallback color */
  background: rgba(0, 0, 0, 0.5);
  /* Black background with 0.5 opacity */
  color: #f1f1f1;
  /* Grey text */
  padding: 20px;
  /* Some padding */
}

.fadeMe .wordsBR {
  position: absolute;
  /* Position the background text */
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0);
  /* Fallback color */
  background: rgba(0, 0, 0, 0.5);
  /* Black background with 0.5 opacity */
  color: #f1f1f1;
  /* Grey text */
  padding: 20px;
  /* Some padding */
}

<div class="wrap">
  <div class="fadeMe">
    <div class="wordsTL">
      <h1>DEV MODE</h1>
    </div>
    <div class="wordsBL">
      <h1>DEV MODE</h1>
    </div>
    <div class="wordsTR">
      <h1>DEV MODE</h1>
    </div>
    <div class="wordsBR">
      <h1>DEV MODE</h1>
    </div>
  </div>
  //Other HTML Page Content behind the overlay
</div>

Answer 5

因此，覆盖层是全屏的，在四个角处都有一些文本：您的实现不错，但是覆盖层的高度超过了页面的大小。

注意：

不要使用元素只是使文本变大-它们具有非常重要的语义，可访问性和SEO角色-而不是样式角色。
您可以通过伪元素添加文本。
您可以添加一个共享类来存储共享样式-使代码更具可读性和可维护性。
不要使用不必要的选择器，例如[div.fadeMe]（是否存在具有.fadeMe类并且需要不同样式的其他类型的元素-p.fadeMe / input.fadeMe /等？）-仅是.fadeMe会很好的。

<div class="fadeMe">
    <div class="words words-TL"></div>
    <div class="words words-BL"></div>
    <div class="words words-TR"></div>
    <div class="words words-BR"></div>
</div>

/* set in relation to the viewport and make it full-size */
.fadeMe {
    position: fixed;
    top: 0; left: 0;
    width:100vw; height: 100vh;
    z-index: 10;
    pointer-events: none;

    filter: alpha(opacity=20);
    background-color: #000;
}

/* shared styles */
.words {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    padding: 20px;
}
/* individual positions */
.words-TL { top: 0;    left:  0; }
.words-TR { top: 0;    right: 0; }
.words-BL { bottom: 0; left:  0; }
.words-BR { bottom: 0; right: 0; }

/* adding the text for all divs */
.words::before {
    content: 'DEV MODE';
    font-size: 36px;
}

将DIVS放置在叠加层的4个角

5 个答案: