c# - 轮播文字没有显示在图片上？-6ren

c# - 轮播文字没有显示在图片上？

转载作者：行者123 更新时间：2023-11-28 02:43:39

我使用了 w3school bootstrap 主题，但没有显示应该在图像上的文本。我确实更改了图像，所以可能那里有问题，希望得到帮助。

当我运行我的网页时，我看不到 slider 上的文本，并且尝试了很多不同的方法但没有结果。

这是我的代码，这里很新，所以不确定我是否正在正确地做代码块以向您展示。

<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>

最佳答案

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

.carousel-caption {
  display: none;
}

如果你注释掉/*display: none; */或将其更改为

.carousel-caption {
  display: block;
}

这应该会在图片上方显示文字。

关于c# - 轮播文字没有显示在图片上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42504210/

文章推荐： jquery - 如何将编辑后的对象值更新回 json url？

文章推荐： javascript - ckeditor中的超链接，href不接受双引号

文章推荐： c++ - 右值引用——我失去了值(value)

javascript - 获取数据:图片/png；base64，{{图片}} net::ERR_INVALID_URL
我想使用 Angular.js 转换从服务器获取的图像数据(用于 ionic 框架)，我使用了这段代码: $http.post(link, { token: token,
javascript - IOS设备隐藏 "Play Store"图片，Android设备隐藏 "App Store"图片
我正在为我的应用制作一个登陆页面。如果它们在 iOS 设备上，我希望它只显示“App Store”图标，但在 Android 上隐藏它。如果它们在 Android 设备上，则只有“Play Store
JavaScript 图片
如何在同一页面上多次显示同一张图片？ function xdf(){ for (i=0;ihello world'); } } 此代码显示“hello world”10 次。我想要同样的东西，
css 图片
您好，我有一个 1px 的 png 文件，我试图将其设置为两个水平相邻的 div 的背景图像。html 和 css 如下:- hi hello css是这样的 div { width: 50%
image - PrestaShop 图片
我的 PHP 项目安装了 Prestashop 1.4.9.0。当我添加一个新产品时，我上传了一个PNG格式的图片，但是当它在客户端显示时，图片是JPG格式的。如何保留图片扩展名？最佳答案在后台
r - 发送表达式给网站返回动态结果(图片)
我用 http://www.regexper.com查看一个象形表示正则表达式很多。我想要一种理想的方法: 向站点发送正则表达式打开显示该表达式的站点例如，让我们使用正则表达式:"\\s*foo[
电子邮件问题中的 Phpmailer 图片
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端，如 gmail、outlook 或 private，图像是正确的，看起来像这样: PHP邮件程
javascript - 使用XPCOM上传网页文件/图片
我正在使用此处找到的示例。 Mozilla developers 我对这个例子很感兴趣。 function upload(postUrl, fieldName, filePath) { var f
电子邮件问题中的 Phpmailer 图片
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端，如 gmail、outlook 或 private，图像是正确的，看起来像这样: PHP邮件程
java - 如何根据javafx中的复选框选择生成按钮(图片)
我的问题是如何根据用户在javafx中选择的复选框和/或单选按钮生成带有汽车图片设置的按钮？我正在用汽车图片模拟汽车经销商网站。用户应该能够通过单击复选框和/或单选按钮选择来过滤显示的图片。我首先
java - 开发支持多语言的java客户端时优化jar文件大小(图片)
我正在开发Java客户端，它应该支持多种语言。为了翻译文本，我使用 Java ResourceBoundle，它工作正常。现在问题出在图像上。客户端应加载大约 50 张图像，这些图像是棋盘游戏的特定
jquery 褪色图片
我对 jQuery 还很陌生，但我正在寻找一个简单的脚本，通过淡入和淡出的方式在标题中循环 3 或 4 个背景图像。它们是透明的 png，因此我尝试过的许多 slider 都不起作用。有什么想法吗？
jQuery:选择器问题(图片)
我有一个 HTML 文档，其中包含本地文件的图像，例如: ios - 物理主体大于它分配给的纹理(图片)
我的 Sprite “physicsBody ”属性之一出现问题。我已经放置了physicsBody节点“barn ”，直接位于 non-physicsBody 之上节点“mound”没有任何问题。
c# - 获取图像的特定部分(图片)
我想剪切图片的特定部分并用它来将剪切的图像与存储在 HDD 中的另一个图像进行比较。问题是我不知道如何获取源图像的特定部分。我知道要裁剪的图像的位置 (X,Y)。最佳答案这将加载原始版本并创建
Javascript 图片 uploader
如何使用裁剪实用程序在 javascript 中实现图像 uploader 。你如何通过 AJAX 提交图像文件？解决方案是否跨域兼容？最佳答案要实现具有裁剪功能的图片上传小部件，您必须: 将图像
来自图库方向的 Android 图片
public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityRes
java - 一个国家的可点击浮雕(图片)
我想在我的 android 应用程序中显示一个国家的图片。国家必须按地区划分。因此，当用户单击特定区域时，应打开特定屏幕。区域也应该用线分隔，以便用户可以看到区域的开始/结束位置。这是一个国家的例子
php - 在php中上传文件时发生错误(图片)
首先我想对这个问题表示歉意，因为我知道已经有很多人问过这个问题了。但我搜索的所有答案都没有解决我的问题。所以希望您考虑这个问题并帮助我解决这个问题。所以基本上我正在尝试上传图像文件，当我提交它时，会
MySQL:查询结果[图片]
我几乎有了想要的数据...但需要帮助过滤它。 (图在底部) 下面的查询返回状态为 Member-id5 的所有记录，但我需要对其进行过滤。例如:如果我对等做了一个简单的查询。 (exp_channel

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

c# - 轮播文字没有显示在图片上？