旋转木马标题未显示在全宽标题旋转木马上

Question

使用带标题的全宽标题旋转木马，它显示图像而不是标题。试图从早上发现，但无法。

please check jsfiddle

html, 
body { 
height: 100%; 
} 

/* You can change the height of the carousel by changing the height in the class below. It is set to 50% by default, but can be any height! */ 

.carousel { 
height: 70%; 
} 

.item, 
.active, 
.carousel-inner { 
height: 100%; 
} 

/* Background images are set within the HTML using inline CSS, not here */ 

.fill { 
width: 100%; 
height: 100%; 
background-position: center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 
} 

    .carousel .item, 
    .carousel .item.active, 
.carousel-caption h2 { 
    font-family:Arial; 
    font-size:60px; 
    text-align:center; 
z-index:10; 
    } 

.carousel-caption .btn-default-outline { 
font-family:Century Gothic; 
background:none; 
border: 4px solid #fff; 
color:#fff; 
padding: 15px 25px; 
} 

.carousel-caption .btn-default-outline:hover { 
background-color:#fff; 
color:#000000; 
} 


    footer { 
    margin: 50px 0; 
} 

它没有显示转盘字幕。

任何人都可以找出什么是缺少或我做错了。

感谢

Answer 1

当你意识到这个问题的简单你可能会踢自己...

这个人物”是错误的，在你的代码的样式属性，并已畸形的HTML。

其在这条线开始：

<div class="fill" style="background-image:url('http://upload.wikimedia.org/wikipedia/commons/archive/0/07/20060606172916%21UCT_Upper_Campus_landscape_view.jpg);”></div> 

收盘报价是错误的，应该是正常的引号"。

它是一个非常微妙的差异，但可能会导致很多问题。检查所有报价可能是一个好主意！

Answer 2

你的inline-css会阻止下面的代码运行。简单地把三个容器的inline-css放到css文件中。

见小提琴

S1 {

background-image:url('http://upload.wikimedia.org/wikipedia/commons/archive/0/07/20060606172916%21UCT_Upper_Campus_landscape_view.jpg'); 

}

http://jsfiddle.net/coxuLkn6/4/