Я разместил зеленое изображение png в качестве фона для div и выглядит так:
Я использовал CSS-хак, чтобы сохранить текст внутри зеленого фона. Итак, это мой HTML для этого раздела:
Теперь я хочу заменить png файлом svg, и единственное, что я изменил в CSS, это расширение файла:
Но когда я просматриваю это в браузере, я больше не вижу фона:
Что я делаю неправильно? Вы можете увидеть демонстрационную страницу с фоновым изображением png здесь.
Благодарим вас за помощь.
РЕДАКТИРОВАТЬ: Здесь ссылка Dropbox на файл SVG.
Возможно, вы уже это сделали, но я предлагаю абсолютно уверенно убедиться в том, что tech_bg.svg находится в каталоге, который он должен был (папка img), и что он записан точно так же, как и в текстовом редакторе, включая чувствительность к регистру имени файла и расширения файла. GitHub, конечно, воспринимает повышенную чувствительность к регистру буквально, и у меня возникли проблемы с загрузкой SVG файлов по той же причине (.svg vs .SVG).
Это решение для OP, см. комментарии для специфики: Следующий вопрос. Я спрошу, как вы сделали SVG? Какое программное обеспечение вы использовали, и уверены, что вы правильно сгенерировали его в Illustrator? Там довольно конкретный способ сделать это.
Единственное, что приходило в голову, заключалось в увеличении z-index от #aboutprocess , особенно если ваш текст действительно исчез (я предполагаю, что он все еще там, просто белый, но попробуйте выделить его, чтобы убедиться). Играйте с другими значениями CSS рядом, как без повтора, слева, сверху и т.д. Тоже.
Попробуйте очистить кеш браузера и обновить его один раз, а также попробовать другие браузеры. Кроме того, если вы случайно используете IE8 и ниже или Android 2.3 и ниже, это определенно будет причиной.
Это сложный вопрос, чтобы ответить окончательно, так как мы не можем там тестировать его с вами на вашей локальной машине, в которой происходит несогласованность.
Хочу на сайте добавить svg, для этого написал:
Проблема в том, что в Firefox и IE данная конструкция работает, а в Chrome нет. В браузере в место картинки пустота, хотя в DOM элемент есть. Подскажите, как исправить. Код svg файла:
1 ответ 1
У вас в svg-файле написано img/png . Это некорректный MIME-тип, поменяйте на image/png и в Chrome всё заработает
(но вообще какой смысл пихать растровую png-картинку в векторный svg-файл?)
Это код svg-ки, у меня она названа как 3.svg.
так ее вставляю в html страницу.
Если вставлять код svg, то все отображается, а если другим способом, то что-то не хочет, в чем может быть дело?
1 ответ 1
Лучше не брать svg изображения формата base64 по многим причинам:
- Это не 100% svg, а формат png обернутый в оболочку svg, поэтому не будет адаптивности, которую ожидаем от формата SVG
- Изображение не будет стилизоваться (менять цвет)
- Посмотрите, как выглядит ваша иконка при небольшом увеличении
Проще скачать нужную иконку в формате svg с любого векторного клипарта
На первых порах освоения svg добавляйте иконки инлайн, то есть непосредственным копированием кода в HTML
Теперь легко применить стили из внешней css, к нашей иконке, например при наведении. (не забудьте удалить стили внутри svg, чтобы они не мешали)
Чтобы сделать иконку адаптивной
Необходимо убрать w , height="70" из шапки svg файла. Обернуть иконку в контейнер и задать в процентах ширину и высоту контейнера