Я работаю с платформой опроса, и в этой платформе я использую предварительно определенный шаблон для опроса. Платформа допускает CSS-модификации, и я стараюсь, чтобы качество изображения заголовка не уменьшалось. Изображение загружается как 1170 * 295, но должно отображаться как 760 * 192.
Платформа предлагает простой вариант загрузки заголовка изображения, но только для определенного размера. Мое изображение имеет более низкую «высоту», чем их стандарт.
Такие вещи, как рендеринг изображений: четкие края; (или -webkit-optimize-контраст ) ничего не делают. «Конечный текст» отображается синим цветом (да, я начинающий, и программирование в любой форме не является частью моей работы).
Заглавное изображение
div.questionnaire-header {
background: url("/images/uploaded/ANFCZ1FSC5C2?width=760&height=192") no-repeat center left;
}
Я надеюсь, что изображение заголовка отображается с четким, четким текстом и не размытым.
3 ответа
Установите свойство background-size равным 100% вашего изображения, чтобы заполнить элемент изображения.
Ваше изображение растягивается, чтобы соответствовать размеру заголовка. Не существует простого способа улучшить изображение в CSS и сохранить его качество. Либо измените ширину заголовка на 760 пикселей, либо найдите изображение размером больше 1170 x 295
Установите для свойства background-size значение 100%, чтобы наше изображение заполняло элемент изображения. Установите для свойства background-position значение 50% 50%, чтобы выровнять фоновое изображение внутри элемента изображения.
Новые вопросы
html
HTML (HyperText Markup Language) является основным языком разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы относительно HTML должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется один и часто в паре с [CSS] и [javascript].