Question

我正在尝试在我的aspx页面中显示背景中带有图像的div。图像的名称是“PathFindingMap”（png文件），位于“images”文件夹中。 “images”文件夹与aspx页面位于同一目录中。但是，页面上没有显示任何内容。

在.aspx页面的客户端，我有以下代码片段：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="floorPlan.aspx.cs" Inherits="ipsWebs.floorPlan" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"  runat="server">
                        <div class="ClsdrawArea" id="draw_area" style="width: 100%; height:100%; background-image: url('images/PathFindingMap.png'); background-repeat: no-repeat; background-size:cover">
                            </div>

</asp:Content>

在Chrome浏览器中，我按下了f5并在网络上检查了它，并说它已加载图像“PathFindingMap”。但是，我在网页上看不到任何内容。我试图复制并粘贴类似的代码“

Answer 1

将背景图像设置为div时，

宽度和高度不起作用。给出高度和宽度（以像素为单位）或使用引导程序。

style="width: 100px; height:100px;

请参阅example plnkr here

Answer 2

您正在将背景图像设置为块元素。默认情况下宽度为100％。但是高度为0px。因此您需要设置一些像素以显示背景。

Answer 3

您是否尝试将图片的Build Action更改为Content和Copy to Output Directory属性为Copy if newer？

javascript div背景图片没有显示

3 个答案: