轮播文字没有显示图片？

时间：2017-02-28 08:57:58

标签： c# html css carousel

我使用过w3school引导程序主题，但是图像上应该显示的文字并没有显示出来。我确实改变了图像，所以可能有一个问题，谢谢你的帮助。

当我运行我的网页时，我看不到滑块上的文字，并尝试了一堆不同的结果。

这是我的代码，这里很新，所以不确定我是否正确地执行代码块事情向您显示。 

<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme The Band</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.container {
  padding: 80px 120px;
}
.person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  width: 80%;
  height: 80%;
  opacity: 0.7;
}
.person:hover {
  border-color: #f1f1f1;
}
.carousel-inner img {
  /*-webkit-filter: grayscale(90%);*/
  /*filter: grayscale(90%); /* make all photos black and white */
  width: 100%; /* Set width to 100% */
  margin: auto;
}
.carousel-caption h3 {
  color: #fff !important;
}

.carousel-caption {
  display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}

.navbar {
  margin-bottom: 0;
  background-color: #2d2d30;
  border: 0;
  font-size: 11px !important;
  letter-spacing: 4px;
  opacity: 0.9;
}
.navbar li a, .navbar .navbar-brand { 
  color: #d5d5d5 !important;
}
.navbar-nav li a:hover {
  color: #fff !important;
}
.navbar-nav li.active a {
  color: #fff !important;
  background-color: #29292c !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
}
.open .dropdown-toggle {
  color: #fff;
  background-color: #555 !important;
}
.dropdown-menu li a {
  color: #000 !important;
}
.dropdown-menu li a:hover {
  background-color: red !important;
}

footer {
  background-color: #2d2d30;
  color: #f5f5f5;
  padding: 32px;
}
footer a {
  color: #f5f5f5;
}
footer a:hover {
  color: #777;
  text-decoration: none;
}  

</style>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-   toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#myPage">Algorithmer/Robothandel</a></li>
                <li><a href="#band">Analyser/Trading idéer</a></li>
                <li><a href="#tour">Tradingskolan</a></li>
                <li><a href="#contact">Kontakt</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        MORE
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Merchandise</a></li>
                        <li><a href="#">Extras</a></li>
                        <li><a href="#">Media</a></li>
                    </ul>
                </li>


            </ul>
        </div>
    </div>
</nav>



<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="~/images/Buysell.png" alt="New York" width="1200" height="700">
            <div class="carousel-caption">
                <h3>New York</h3>
                <p>Syns texten någonstans?.</p>
            </div>
        </div>

        <div class="item">
            <img src="~/images/surf.jpg" alt="Chicago">              
                <div class="carousel-caption">
                    <h3>Chicago</h3>
                    <p>Thank you, Chicago - A night we won't forget.</p>                    
            </div>
        </div>

        <div class="item">
            <img src="~/images/kite.png" alt="Los Angeles" width="1200" height="700">
            <div class="carousel-caption">
                <h3>LA</h3>
                <p>Even though the traffic was a mess, we had the best time playing at Venice Beach!</p>
            </div>
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">    </span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="container text-center">
    <h3>En sida om trading</h3>
    <p><em>Följ din dröm!</em></p>
    <p>mmmmmmmmmmmmmmmmmm       sssssssssssssss          sssss
    ssssssssssssssssss         fffffffffffffffff fffffffffffff
    ffffffffffffff ffffffffffff ffffffffffffffff
    ve created a fictional band website. Lorem ipsum..</p>
    <br>
    <div class="row">
        <div class="col-xs-4">
            <p class="text-center"><strong>Algoritmer/Robothandel</strong>  </p><br>
            <a href="#demo" data-toggle="collapse">
                <img src="~/images/robot.png" class="img-circle person" alt="Random Name" width="255" height="255">
            </a>
            <div id="demo" class="collapse">
                <p>Guitarist and Lead Vocalist</p>
                <p>Loves long walks on the beach</p>
                <p>Member since 1988</p>
            </div>
        </div>
        <div class="col-xs-4">
            <p class="text-center"><strong>Analyser/Trading idéer</strong></p><br>
            <a href="#demo2" data-toggle="collapse">
                <img src="~/images/kite.png" class="img-circle person"   alt="Random Name" width="255" height="255">
            </a>
            <div id="demo2" class="collapse">
                <p>Drummer</p>
                <p>Loves drummin'</p>
                <p>Member since 1988</p>
            </div>
        </div>
        <div class="col-xs-4">
            <p class="text-center"><strong>Tradingskolan</strong></p><br>
            <a href="#demo3" data-toggle="collapse">
                <img src="~/images/skolan.png" class="img-circle person" alt="Random Name" width="255" height="255">
            </a>
            <div id="demo3" class="collapse">
                <p>Bass player</p>
                <p>Loves math</p>
                <p>Member since 2005</p>
            </div>
        </div>
    </div>
</div>


<footer class="text-center">      


    <p>Bootstrap Theme Made By <a href="https://www.w3schools.com" data-toggle="tooltip" title="Visit w3schools">www.w3schools.com</a></p>
</footer>



</body>
</html>

2 个答案:

答案 0 :(得分：0)

当我运行你的代码时，我可以看到你有一个css样式，设置为none。

.carousel-caption {
  display: none;
}

如果您对此发表评论/ * display：none; * /或将其更改为

.carousel-caption {
  display: block;
}

这应该显示图像上方的文字。

答案 1 :(得分：0)

从css中删除以下代码：

.carousel-caption {
  display: none;
  /* Hide the carousel text when the screen is less than 600 pixels wide */
}

上述文字应放在媒体查询中，以隐藏屏幕尺寸小于600像素的文字。

如果你想达到同样的目的，你可以做的就是附上以下代码：

@media only screen and (max-width: 600px) {
    .carousel-caption {
      display: none;
      /* Hide the carousel text when the screen is less than 600 pixels wide */
    } 
}
相关问题
最新问题