Блог

Главная - Вопросы по программированию - Текст поверх фонового изображения не выделяется с помощью z-индекса

Текст поверх фонового изображения не выделяется с помощью z-индекса

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать темный слой поверх яркого фонового изображения. Чтобы текст отображался правильно.

Ниже приведен фрагмент:

 .link {
  position: relative;
  z-index: 1;
}

.link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}  
 <div id="contents" class="bg-light">
  <a href="#" id="movies" class="link">
    <div class="link-content">
      <h3>My <strong class="text-primary">Movie</strong> Collection</h3>
      <p><strong class="text-secondary">Click Here</strong> to discover the movie collections</p>
    </div>
  </a>
  <a href="#" id="anime" class="link">
    <div class="link-content">
      <h3>My <span class="text-primary">Anime</span> Collection</h3>
      <p>Check out our anime collections rated and recommended by other viewers. <span class="text-secondary">Click Here</span></p>
    </div>
  </a>
  <a href="#" id="ws" class="link">
    <div class="link-content">
      <h3>My <strong class="text-supplementary">Web-Series</strong> Collection</h3>
      <p><span class="text-secondary">Click Here</span> Check out our Web-Series collections rated and recommended by other viewers.</p>
    </div>
  </a>
</div>

но z-index он не работает должным образом, и непрозрачность текста также уменьшается вместе с изображением.

Пожалуйста, помогите, как я могу увеличить видимость текста внутри класса «Link-content»

Ответ №1:

Во-первых, дайте классу link какое-то отображение, например : display: block;

Затем перейдите к псевдоклассу ::before и дайте ему z-index: -1

это заставит его работать и сделает фон сзади, а текст спереди.

 .link {
  position: relative;
  display: block;
  z-index: 1;
}

.link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}  
 <div id="contents" class="bg-light">
  <a href="#" id="movies" class="link">
    <div class="link-content">
      <h3>My <strong class="text-primary">Movie</strong> Collection</h3>
      <p><strong class="text-secondary">Click Here</strong> to discover the movie collections</p>
    </div>
  </a>
  <a href="#" id="anime" class="link">
    <div class="link-content">
      <h3>My <span class="text-primary">Anime</span> Collection</h3>
      <p>Check out our anime collections rated and recommended by other viewers. <span class="text-secondary">Click Here</span></p>
    </div>
  </a>
  <a href="#" id="ws" class="link">
    <div class="link-content">
      <h3>My <strong class="text-supplementary">Web-Series</strong> Collection</h3>
      <p><span class="text-secondary">Click Here</span> Check out our Web-Series collections rated and recommended by other viewers.</p>
    </div>
  </a>
</div>

Если это не то, что вы ищете, дайте мне знать.

Ответ №2:

Неправильное форматирование окружает блочный элемент встроенными элементами. Вот почему решение @Ahmad Dalao работает, добавляя display: block к <a> тегу.

Я не понимаю. Почему вы не можете просто указать .link-content цвет фона? Вы указываете «… поверх яркого фонового изображения», но я не вижу для этого никакого кода.

 .link-content {
  background-color: rgba(0, 0, 0, 0.5);
}  
 <div id="contents" class="bg-light">
  <a href="#" id="movies" class="link">
    <div class="link-content">
      <h3>My <strong class="text-primary">Movie</strong> Collection</h3>
      <p><strong class="text-secondary">Click Here</strong> to discover the movie collections</p>
    </div>
  </a>
  <a href="#" id="anime" class="link">
    <div class="link-content">
      <h3>My <span class="text-primary">Anime</span> Collection</h3>
      <p>Check out our anime collections rated and recommended by other viewers. <span class="text-secondary">Click Here</span></p>
    </div>
  </a>
  <a href="#" id="ws" class="link">
    <div class="link-content">
      <h3>My <strong class="text-supplementary">Web-Series</strong> Collection</h3>
      <p><span class="text-secondary">Click Here</span> Check out our Web-Series collections rated and recommended by other viewers.</p>
    </div>
  </a>
</div>

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

1. Я пытался создать 3 горизонтальных контейнерных блока с помощью Flexbox. Для каждого блока будет 3 разных изображения с текстом над ними. Все изображение будет находиться под тегом <a>, чтобы оно было интерактивным. Но изображение, которое я использовал, было настолько ярким, что текст на нем вообще не был виден, поэтому я попытался уменьшить яркость, добавив к нему темный прозрачный фон, это сработало, но яркость текста тоже уменьшилась. Похоже, мне нужно было упомянуть z-index = -1 и для позиции: absolute . Я пропустил эту часть