Question

我有一个.bmp类型的图像，我希望在aspx页面上用作背景图像。

以下是我在.css文件中的代码：

/* Background home image
-----------------------------------------------------------*/

.page
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#HomePage
{
    background-image: url('C:\Users\MyName\Documents\Visual Studio 2010\Projects\IP_Project2\IP_Project2\images\WeMeet - Landing Page.bmp');
}

/////////////////////////////////////////////// ////////////////////////////////

.Aspx Code

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site1.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <h2></h2>
   <div id="HomePage">
    <p>Hello</p>
   </div>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">

</asp:Content>

网页上没有显示图像......可能是什么问题？

Answer 1

您的图片路径应该相对于网站的根目录，而不是物理文件系统路径。它只知道你的网站根目录。

如果您的图片存储在图片文件夹中，该图片文件夹位于您网站根目录的一个级别（您看起来像是这样），您将拥有：

background-image: url('/images/WeMeet - Landing Page.bmp');

这将从网站的根目录开始，查找名为images的文件夹，然后查找名为image.bmp的文件

编辑：

我已在本地包装盒上验证了您的设置。我创建了一个类似设计的WebApplication项目。

C：\ Users [Me] \ Documents \ Visual Studio 2010 \ Projects \ WebApplication1 \ WebApplication1 \

创建一个带空格的bmp，并在CSS文件中引用为：

    body   
{
    background-image: url('/images/Image With Spaced Name.bmp');
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

这可以正常运作。

Results

您可以将背景图片切换到body类，以验证它不是#HomePage id的引用问题吗？

Answer 2

虽然主要浏览器.bmp支持.png，但.gif和.jpg在浏览器中支持率最高，而且通常更适合网络

Image Format Support - wikipedia.org

我建议将文件保存为.png或.jpg，然后再尝试使用以下内容：

background-image: url('/images/WeMeet - Landing Page.png')

以下是一个基本示例：http://jsfiddle.net/pxfunc/UkCKX/1/

另请注意，图像的相对路径是基于您的css文件

所以如果css在这样的根文件夹中

图像（文件夹）
Default.aspx的
Styles.css中

然后来自css的路径为images/[filename]

或者如果css嵌套在像这样的文件夹中

图像（文件夹）
样式（文件夹）
- Styles.css中
Default.aspx的

然后来自css的路径为../images/[filename]

.aspx页面上的背景图片

2 个答案: