Блог

Главная - Вопросы по программированию - Разместить разделы в 4-х углах наложения

Разместить разделы в 4-х углах наложения

#html #css

#HTML #css

Вопрос:

У меня есть версия для разработки и производства моего сайта. Поскольку они выглядят одинаково, я хочу разместить прозрачное наложение поверх версии разработки с белым текстом в каждом из 4 углов. В каждом углу текста написано «РЕЖИМ РАЗРАБОТКИ». При прокрутке пользователем наложение с текстом всегда должно отображаться в каждом из углов.

Отображается только верхний левый 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>

Ответ №1:

Я рекомендую использовать пару <div> s с 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;
}

Ответ №2:

Попробуйте высушить свой код… Я переписал некоторые части, чтобы исправить некоторые проблемы. Используйте position: fixed со свойствами 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>

Комментарии:

1. fadeMe [class^=»words»] не очень хорошая идея — она будет оценивать true для такого класса, как ‘words-asdf’, в основном для любого класса, который начинается со ‘words’ — и который может появиться где-то еще в приложении. Всего для 4 классов вы должны просто жестко запрограммировать его. Также может быть оценено значение true, если другие классы будут добавлены к элементу позже и помещены перед классом [‘words**’] — поскольку имя класса не будет начинаться со значения вашего запроса — пример [<span class=»smtgElse wordsBR»>]

2. Я так не вижу. Это четко определенная область.

3. При необходимости его можно улучшить, чтобы улучшить структуру. Это был просто быстрый ответ. Имейте в виду, что текст в псевдоэлементах может представлять проблему в некоторых программах чтения с экрана.

Ответ №3:

Просто поместите text-align: right на каждый из правых разделов.

В качестве альтернативы, снимите правило 100% ширины со всех внутренних элементов и позвольте им соответствовать их содержимому:

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

ДЕМОНСТРАЦИЯ

Кстати, вы можете сделать это с одним элементом (или двумя, если вы не можете использовать body .

Демонстрация 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>

Ответ №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>

Ответ №5:

Итак, наложение полноэкранное, с некоторым текстом во всех четырех углах: ваша реализация была хорошей, но высота вашего наложения превысила размер страницы.

Примечания:

  • не используйте элементы <heading>, чтобы просто увеличить текст — они играют очень важную роль в семантике, доступности и SEO, а не в стилизации.
  • вы можете добавлять текст через псевдоэлементы.
  • вы можете добавить общий класс для хранения стилей общего доступа — это делает код более читаемым и удобным для обслуживания.
  • не используйте ненужные селекторы, такие как [div.fadeMe] (существует ли другой тип элемента, который имеет класс .fadeMe и требует другого стиля — p.fadeMe / input.fadeMe / etc ? ) — просто .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;
}
Метки: