【发布时间】：2014-06-17 10:00:52
【问题描述】：
我正在使用来自 bootstrap 的以下模板 - https://startbootstrap.com/template-overviews/grayscale/ 用于我的网络应用程序。 我们正在使用 ASP.net Web 表单架构来构建这个 Web 应用程序。当我将所有文件加载到我的 Web 应用程序并运行该应用程序而不对代码进行任何更改时，背景图像在 aspx 文件中是无方向的。
但奇怪的是，当我使用 html 文件运行时，背景图像的方向正确。
我检查了所有参考资料，两者都是相同的。 我相信当以 html vs aspx pages 运行时，下面的 css 类中发生了一些事情，但不确定出了什么问题。
.介绍
{
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
/*background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;*/
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.intro-body {
display: table-cell;
vertical-align: middle;
/*height: 991px;*/
}
请指教！
根据其中一位用户的要求，这是我的 aspx 代码 - 与源代码相同
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Project9xz.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Project 9xz</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Fonts -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css' />
<!-- Custom Theme CSS -->
<link href="css/grayscale.css" rel="stylesheet" />
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">
<i class="fa fa-play-circle"></i><span class="light">Start</span> Bootstrap
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#download">Download</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, premium quality, responsive one page Bootstrap theme created by Start Bootstrap.</p>
<div class="page-scroll">
<a href="#about" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>About Grayscale</h2>
<p>Grayscale is a premium quality, free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, all you need to do is download the template on the preview page. You can use this template for any purpose, personal or commercial.</p>
<p>This striking, black and white theme features stock photographs by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Map skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p>
<p>With this template, just the slightest splash of color can make a huge impact on the overall presentation and design.</p>
</div>
</div>
</section>
<section id="download" class="content-section text-center">
<div class="download-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2>Download Grayscale</h2>
<p>You can download Grayscale for free on the download page at Start Bootstrap. You can also get the source code directly from GitHub if you prefer. Additionally, Grayscale is the first Start Bootstrap theme to come with a LESS file for easy color customization!</p>
<a href="http://startbootstrap.com/grayscale" class="btn btn-default btn-lg">Visit Download Page</a>
</div>
</div>
</div>
</section>
<section id="contact" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>Contact Start Bootstrap</h2>
<p>Feel free to email us to provide some feedback on our templates, give us suggestions for new templates and themes, or to just say hello!</p>
<p>feedback@startbootstrap.com</p>
<ul class="list-inline banner-social-buttons">
<li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i><span class="network-name">Twitter</span></a>
</li>
<li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i><span class="network-name">Github</span></a>
</li>
<li><a href="https://plus.google.com/+Startbootstrap/posts" class="btn btn-default btn-lg"><i class="fa fa-google-plus fa-fw"></i><span class="network-name">Google+</span></a>
</li>
</ul>
</div>
</div>
</section>
<div id="map"></div>
<!-- Core JavaScript Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Google Maps API Key - You will need to use your own API key to use the map feature -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
</div>
</form>
</body>
</html>
【问题讨论】：
-
发布一些 asp.net 代码。您使用的是 ASP.NET Web 表单起始模板，您使用的是母版页等吗？
-
我正在使用一个空的 asp.net Web 应用程序，并将相同的 HTML 代码从源代码粘贴到 aspx 页面的头部和正文中。 （PS-我没有使用母版页）
-
从您的 aspx 页面发布完整代码。
-
p.s 在该模板上，介绍部分的高度（以及因此的大背景图像）由媒体查询决定 - 请参阅
@media (min-width: 767px) .intro { height: 100%; padding: 0; }。如果我在 Chrome 中禁用这些，页面开始看起来像你的第一个屏幕截图。 -
您好，我已经发布了我的 aspx 代码。我还在 css 中看到了@media (min-width: 767px)，但我没有禁用任何东西，你知道为什么这仍然会发生吗？ PS：但是，我确实有 Visual Studio 2012 显示的验证，说明“无法识别@块类型” - 你认为这会导致一些问题吗？
标签： asp.net css responsive-design twitter-bootstrap-3 image-scaling