BootStrap: изображение jumbotron не работает?

У меня возникла проблема с добавлением фонового изображения в класс jumbotron с использованием рамки bootstrap-css, я связал свою страницу с bootstrap cdn. В моем стиле теге страницы я добавилBootStrap: изображение jumbotron не работает?

.jumbotron { 
    height: 500px; 
    display: flex; 
    align-items: center; 
    background: url("C:\Users\burningknight7\Desktop\Gusto\Gusto_Background_Food.jpg") center center; 
    background-size: cover; 
    margin: 100px 0px; 
}

Этого код стилизовать класс JumboTron персонально и URL, вы можете догадаться, каким образом я хочу добавить JumboTron фона и где она хранится. (Gusto является папку, которую я создал на рабочем столе), но изображение не отображается. Я попробовал онлайн-URL для другого изображения, но это тоже не работает.

источник

2016-04-24 tanay joshi burningknight7

Можете ли вы разместить jsfiddle или codepen? – Froy

Вы действительно хотите найти путь к локальному компьютеру? –

Я проверил ваш код на jsfiddle. Он работает нормально. Посмотрите: https://jsfiddle.net/dzul1983/tmukas42/ –

Вы пытались изменить имя класса, хотя я не думаю, что это из-за имени класса. Это происходит из-за вашего URL-адреса изображения. Поскольку Gusto - это папка вашего проекта, смена URL-адреса на «Gusto_Background_Food.jpg» будет работать.

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <title>Gusto Food</title> 
    </head> 
<body> 
    <div class="jumbotron background"> 
    <h1>Gusto Food!</h1> 
    <p>There must be something good that we are looking for.</p> 
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 
    </div> 
</body> 
</html>

style.css

.background{ 
    height:500px; 
    display:flex; 
    align-items:center; 
    background:url("Gusto_Background_Food.jpg") center center; 
    background-size:cover; 
    margin:100px 0px; 
}

Структура папок:

Gusto    
    - index.html 
    - style.css 
    - Gusto_Background_Food.jpg

Я думаю, что это поможет вам. Пожалуйста, не стесняйтесь комментировать, если это не работает для вас.

источник

2016-04-24 19:14:22

Ничего себе, спасибо, это сработало. Я не знаю, почему я раньше этого не делал. в любом случае еще раз спасибо. –

Как это сработало, можете ли вы пометить мой ответ как принятый? –

Это working..Please увидеть JS скрипку здесь:

https://jsfiddle.net/DTcHh/19792/

HTML:

<div class="jumbotron"></div>

CSS;

.jumbotron { 
    height: 500px; 
    display: flex; 
    align-items: center; 
    background: url("http://www.wallpaperstunnel.com/wp-content/uploads/2016/02/Green-Background-Screensaver-HD-Wallpapers.jpg") center center; 
    background-size: cover; 
    margin: 100px 0px; 
}

источник

2016-04-24 19:20:39 satya

BootStrap: изображение jumbotron не работает?

ответ

Смежные вопросы