Не ставится background-image через селектор в теге selection, за то в теге div с тем же селектором все работает прекрасно. В чем ошибка и почему так?
Накладываю фон-картинку на тег selection с классом "top":
<main class="main"> <selection class="top"> <div class="container"> <div class="top__inner"> <h1 class="top-title" id="top-title"> A cup of tea is a moment of calm in the chaos of life </h1> <p class="top-text" id="top-text"> Wide selection of high-quality teas from all over the world, carefully curated by tea experts. </p> </div> </div> </selection> |
<main class="main"> <selection class="top"> <div class="container"> <div class="top__inner"> <h1 class="top-title" id="top-title"> A cup of tea is a moment of calm in the chaos of life </h1> <p class="top-text" id="top-text"> Wide selection of high-quality teas from all over the world, carefully curated by tea experts. </p> </div> </div> </selection>
В результате картинки вообще никакой нету. Затем делаю тоже самое, но меняю тег selection на тег div:
<main class="main"> <div class="top"> <div class="container"> <div class="top__inner"> <h1 class="top-title" id="top-title"> A cup of tea is a moment of calm in the chaos of life </h1> <p class="top-text" id="top-text"> Wide selection of high-quality teas from all over the world, carefully curated by tea experts. </p> </div> </div> </div> |
<main class="main"> <div class="top"> <div class="container"> <div class="top__inner"> <h1 class="top-title" id="top-title"> A cup of tea is a moment of calm in the chaos of life </h1> <p class="top-text" id="top-text"> Wide selection of high-quality teas from all over the world, carefully curated by tea experts. </p> </div> </div> </div>
Всё! Работает как и задумано.
.top { background-image: url(resource/prev.png); background-repeat: no-repeat; background-position: bottom center; background-size: cover; } .top__inner { min-height: 500px; } |
.top { background-image: url(resource/prev.png); background-repeat: no-repeat; background-position: bottom center; background-size: cover; } .top__inner { min-height: 500px; }
Почему именно с тегом selection оно не хочет работать? ¯(°_o)/¯
Дополнительно:
где вы нашли тег selection?
Если написать <abracadabra>, то тоже ничего не получится.
По умолчанию у всех неизвестных/несуществующих тегов (а тега selection не существует) стиль display:inline. Можно считать что они все аналогичны тегу span.
Если вы попробуете использовать в этом месте span, то получите такой же результат.
Что бы было видно фон нужно явно задать стиль display: block.
snippet
Может быть вместо тега selection должен быть тег section?
Ответы:
Такого тега не существует
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, о которой вы упомянули, связана с тем, что CSS свойство `background-image` не может быть применено к выделенному тексту с помощью селектора `::selection`. Это связано с тем, что браузеры имеют ограничения на использование определенных свойств в селекторах `::selection`.
Однако, вы можете достичь желаемого эффекта, используя обертку в виде `
```html
div::selection {
background-image: url('your-background-image-url.jpg');
color: white; /* Цвет текста */
}
Текст, который будет выделяться с фоновым изображением.
```
В этом примере мы используем обертку в виде `
Надеюсь, этот ответ поможет вам решить проблему с применением фонового изображения к выделенному тексту на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.