Блог

Главная - Вопросы по программированию - Как установить текст поверх элемента с непрозрачностью фона 0.6?

Как установить текст поверх элемента с непрозрачностью фона 0.6?

#html #css #opacity

Вопрос:

 .c{
    display: flex;
    padding-top: 18em;
    .backgroundDiv{
        background: url("/images/DSC8253.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center ;
        height: 20em;
        opacity: 0.6;
         position: absolute;
         width: 100%;
         z-index: -1;
         
    }
}
.bigText{
    display: flex;
    text-transform: uppercase;
    font-size: 3em;
    font-family: cursive;
    font-weight: 600;
    height: 8em;
    top:2em;
} 
  <section class="c">
         <div class="backgroundDiv"></div>
         <div class="bigText">
             <p>Pilki-HUILKI</p>
             </div>
     </section>

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

1. Вы пробовали использовать цвет rbga () для bg вместо непрозрачности? Непрозрачность также изменит непрозрачность текста, который находится в div, rbga() изменит только фон.

2. @NathanielFlick это будет работать с фоновым изображением? Какое свойство, вы имеете в виду, должно быть установлено со значением rgba()?

3. Вы используете препроцессор, потому что это не похоже на CSS. Однако, когда я делаю это CSS, текст поверх изображения в порядке. Не могли бы вы описать, как вы хотите, чтобы результат выглядел?

4. rgba установит непрозрачность для colot как предполагается работать с изображением? я использую sass да. есть папка git с кодом fuul atm

5. @Corrl упс, я забыл, что там изображение, а не цвет.

Ответ №1:

Здесь в файле css вы вводите, как показано ниже (просто небольшое изменение)

 .c {
  display: flex;
  position: relative;
  height: 100vh;
}

.backgroundDiv {
  background: url('/images/DSC8253.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 20em;
  opacity: 0.6;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.bigText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  text-transform: uppercase;
  font-size: 3em;
  font-family: cursive;
  font-weight: 600;
}

Я использую абсолютную позицию, чтобы сделать текст поверх фона, затем я использую преобразование, чтобы переместить его в центр

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

1. это обычная практика? или просто решение для моей вещи с werid?:)

2. @DeanWinchester88 я работаю в своей компании, и этот способ очень популярен, я рекомендовал вас

3. Спасибо. хотите стать младшим FE.is есть ли какой-нибудь список читов, используемый для распространенных ситуаций, таких как шаблон для меню гамбургеров, модальные окна и так далее? сначала я изучаю создание мобильных устройств

4. Pos absolute удаляет значок из потока документов и, следовательно, к нему не применяется такая же непрозрачность, как к bg (.6).

5. ну, или я ошибаюсь, или это работает не так, как ожидалось codepen.io/DeanWinchester88/pen/mdMwBJq

Метки: ,