background-size: cover и позиции элементов [закрыт]
Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.
Закрыт 1 год назад.
Есть нестандартное изображение заднего фона, которое я растягиваю по всему размеру блока с помощью background-size: cover; при масштабировании сталкиваюсь со следующей проблемой, положение текста меняется, а изображение меняется на основе размера блока:
Исходное состояние:
https://clip2net.com/s/43ZuVFE
Что выдает при масштабированиее:
https://clip2net.com/s/43ZuRSS
Как должно быть: https://c2n.me/43ZvaVF
Подскажите пожалуйста, как решить эту задачу?
Всем спасибо!
Решение SVG+CSS
Чтобы обеспечить кроссбраузерность и адаптивность при любом размере дисплея можно воспользоваться следующей техникой:
- Добавляете изображение фона с помощью тега SVG
<image> - Текст добавляете с помощью тега
<text>и позиционируете его с помощью координатxиyОборачиваете svg код в контейнер. Теперь у вас это будет самостоятельный блок, начальные размеры, которого можно менять с помощью процентов и встроить в любое место вашей веб страницы.
Надеюсь ответ вам будет полезен.
.container {
width:100%;
height:100%;
}
text {
font-size:48px;
font-family:sans-serif;
font-weight:700;
fill:white;
}<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 1055 717" preserveAspectRatio="xMinYMin meet" >
<image xlink:href="https://i.stack.imgur.com/ORJ3b.jpg" width="100%" height="100%" />
<text x="550" y="200" >TECT </text>
</svg>
</div> Другая картинка, кроме ссылки не требуется ничего менять в коде. Адаптивность также осталась и текст не меняет своё расположение:
.container {
width:100%;
height:100%;
}
text {
font-size:48px;
font-family:sans-serif;
font-weight:700;
fill:white;
}<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 1055 717" preserveAspectRatio="xMinYMin meet" >
<image xlink:href="https://i.stack.imgur.com/Vamst.jpg" width="100%" height="100%" />
<text x="550" y="200" >TECT </text>
</svg>
</div> Попробуйте background-size: 100%; а для более точного ответа, прикрепите ваш код.
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
- Почему SERVER_ADDR имеет не тот IP 47548 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30490 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23621 visits
- Как через css изменить цвет png изображения? 10345 visits
- Blob video url download 9952 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8087 visits
© "hostciti.net" 16.11.2024 | 04:31