s1 {

Question

使用带字幕的全宽标题轮播，它显示图像但不显示字幕。试图从早上发现但无法找到。

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

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

此字符”对于代码中的style属性有误，并且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/

旋转木马标题未显示在全宽标题轮播中

2 个答案:

s1 {