мое CSS фоновое изображение не отображается - PullRequest
Новая
       7

мое CSS фоновое изображение не отображается

2 голосов
/ 04 августа 2020

Я загрузил файл в свой git репозиторий, скопировал ссылку и вставил сюда. Есть ли какой-то определенный метод? 

html{
  background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg");
}

Ответы [ 4 ]

2 голосов
/ 04 августа 2020

Вам необходимо использовать этот URL-адрес необработанного изображения raw_background_img_sr c, поскольку URL-адрес, который вы используете, не будет работать. См. Рабочий пример ниже: 

body { 
    background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg?raw=true");
}
<html>
</html>
1 голос
/ 04 августа 2020

URL-адрес, который вы использовали (https://github.com/vindhya97/images/blob/master/pinkbackground.jpg), возвращает страницу HTML, содержащую (среди прочего) само целевое изображение. Просто посетите URL-адрес и посмотрите. Я знаю, что на первый взгляд это может показаться немного странным, но именно так работает GitHub. Итак, поскольку URL-адрес на самом деле не обслуживает изображение, вы не можете увидеть изображение, отображаемое на вашем фоне.

Если вы хотите получить само изображение, а не страницу HTML, вы должны получить доступ "необработанный" URL для изображения: https://raw.githubusercontent.com/vindhya97/images/master/pinkbackground.jpg Просто используйте этот URL вместо исходного.

Но будьте осторожны с этим подходом встраивания изображений в веб-страницы. Теперь ваш репозиторий publi c. Но если вы развернете веб-приложение на каком-либо сервере, а затем сделаете свой репозиторий закрытым, скорее всего, пользователи, которые обращаются к веб-приложению, не увидят изображение.

1 голос
/ 04 августа 2020

Вы просто должны использовать необработанную ссылку на изображение: 

body {
    width: 100%;
    height: 100%;
    background-image: url("https://raw.githubusercontent.com/vindhya97/images/master/pinkbackground.jpg");
}
1 голос
/ 04 августа 2020

Вы скопировали ссылку на страницу, вам нужно скопировать ссылку на изображение:

ссылка на страницу (неверно): https://github.com/vindhya97/images/blob/master/pinkbackground.jpg

ссылка на изображение (это правда) : https://github.com/vindhya97/images/blob/master/pinkbackground.jpg?raw=true

или

https://raw.githubusercontent.com/vindhya97/images/master/pinkbackground.jpg

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...