Где добавить тег span, который разделяет содержимое

Мне нужен текст на картинке, поэтому я использую следующий код CSS:

.blur{
            width:100%;
            height: 500px;
            background-image:url(./images/14.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
.b-cont{
            width: 100%;
            height: 500px;
            font-family: Raleway;            
            background: rgba(201, 186, 186, 0.1);
            backdrop-filter: blur(5px);
            color: #ffcd3c;
            font-size: 72px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
span{ 
            color: white;
        }

HTML-код:

<body>
     <div class = "blur">
            <div class = "b-cont">
            Background of laptop is good but have to <span>blur</span> for the website
            </div>
        </div>
</body>

Я хотел раскрасить предложение по-другому, поэтому добавил тег span. Это дало цвет, но разделило предложение

Посмотрите на это:
Где добавить тег span, который разделяет содержимое

css flexbox

26.12.2020 15:12

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Проблема, которая вызывает это, заключается в том, что вы указали div для отображения в виде гибкого макета. При удалении display:flex; из класса b-cont текст отображается правильно:

.blur {
    width: 100%;
    height: 500px;
    background-image: url(./images/14.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    display: flex;
    align-items: center;
    text-align: center;
}

.b-cont {
    width: 100%;
    height: 500px;
    font-family: Raleway;
    background: rgba(201, 186, 186, 0.1);
    backdrop-filter: blur(5px);
    color: #ffcd3c;
    font-size: 72px;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: fit-content;
}

span {
    color: white;
}

<body>
    <div class = "blur">
         <div class = "b-cont">
             Background of laptop is good but have to <span>blur</span> for the website
         </div>
    </div>
</body>

Кодепен: https://codepen.io/chingucoding/pen/GRjOGrK

его изменение вертикального выравнивания содержимого

— 26.12.2020 18:10

Должно быть исправлено сейчас, текст теперь центрирован по вертикали.

— 26.12.2020 18:17

26.12.2020 15:55

<body>
 <div class = "blur">
        <div class = "b-cont">
        <p>Background of laptop is good but have to <span>blur</span> for the website</p>
        </div>
    </div>

CSS

.b-cont{
        width: 100%;
        height: 500px;
        font-family: Raleway;            
        background: rgba(201, 186, 186, 0.1);
        backdrop-filter: blur(5px);
        color: #ffcd3c;
        font-size: 72px;
        display:flex;
        vertical-align: middle;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
span{ 
        color: white;
        display: inline-block;
        vertical-align: middle;

    }

Ну вот ! Текст по центру с интервалом.

— 26.12.2020 18:17

26.12.2020 18:16

Ответ принят как подходящий

Мое предложение:

.blur {
  width: 100%;
  height: 500px;
  background-image: url(./images/14.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.b-cont {
  height: 100%;
  background: rgba(201, 186, 186, 0.1);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
}

.text {
  font-family: Raleway;
  color: #ffcd3c;
  font-size: 72px;
  text-align: center;
}

span {
  color: green; /* Changed to green in order to make it more visible */
}

<div class = "blur">
  <div class = "b-cont">
    <div class = "text">Background of laptop is good but have to <span>blur</span> for the website</div>
  </div>
</div>

26.12.2020 18:52

Другие вопросы по теме

Flexbox div не занимает все вертикальное пространство

Свойство flexbox, реагирующее на попутный ветер, не работает должным образом

Обходной путь Flexbox для Safari

Выровняйте несколько текстовых полей в ряд, реагируя на родной

Расположите выдвижную панель под верхней навигацией

Как остановить нежелательное движение ссылки при наведении курсора с помощью «Flex» в качестве отображения?

Как выровнять правильно, когда срабатывает flex-wrap, но в противном случае выровнять пространство между содержимым?

Мои контейнеры flexbox не реагируют на flex-direction:column

Установка поля на авто во flexbox

Как я могу сделать этот макет Святого Грааля на основе CSS Grid с изменяемым размером заголовка, нижнего колонтитула и боковых панелей?

Где добавить тег span, который разделяет содержимое

Ответы 3

Другие вопросы по теме

Похожие вопросы