BootStrap：jumbotron背景图片不工作？

我在使用bootstrap-css框架将背景图像添加到jumbotron类时遇到了问题，我已将我的页面链接到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; 
}

此代码本人来说样式的超大屏幕类，并通过URL你能猜到我想要的图像添加到超大屏幕的背景，并在那里保存。（趣味是我在桌面上创建的文件夹）但图像没有显示我尝试了一个不同的图像的在线网址，但这似乎并没有工作。

来源

2016-04-24 tanay joshi burningknight7

你可以发布jsfiddle或codepen吗？ – Froy

你确定你想要一个到你的本地计算机的路径吗？ –

我已经在jsfiddle上测试过你的代码。它工作正常。看看：https://jsfiddle.net/dzul1983/tmukas42/ –

您是否尝试过更改类名称，尽管我不认为这是因为类名造成的。这是因为你的图片网址。由于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背景图片不工作？

回答

相关问题