以 css、html 显示图像答案

【问题标题】：Image display in css, html以 css、html 显示图像
【发布时间】：2017-03-13 12:04:35
【问题描述】：

由于某种原因，我无法完全理解 CSS 和 HTML。我正在尝试在我的母版页中为 HTML div 显示图像。我正在使用 Visual Studio，它们位于不同的文件中。

HTML：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div class="image" href="/css/masterCSS.css">

    </div>
    <form id="form1" runat="server">
    <div>
        <br />
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">    
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

CSS：

div.image {
    content:url(http://i.imgur.com/6d3unPC.jpg)
}

文件：

我在 div 上尝试了 runat="server" 并没有改变任何东西。

【问题讨论】：

您需要在标题中链接样式表 - 而不是在 div 上：developer.mozilla.org/en/docs/Web/HTML/Element/link
在上面我要添加的评论之上-图像可以通过background-image属性或<img src='#'>标签作为背景添加到div
在这里你可以使用.net图片标签来预览图片。

标签： html css asp.net visual-studio

【解决方案1】：

在 HTML 中，您通常会在 head 标记中链接一个 CSS 文件，而您似乎不会这样做：

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link rel="stylesheet" type="text/css" href="/css/masterCSS.css">
</head>

从那里你应该能够做到：

<div class="image"></div>

您可以了解有关链接样式表的更多信息HERE

【讨论】：

也正如其他人已经说过的，图像标签可能更适合您使用：<img src="http://i.imgur.com/6d3unPC.jpg">
我试过这个，但它不起作用。如果我将它放入 div 中，它只是一个空白或“...”。
@JarrenOng 三点的意思更多是作为占位符，我可能不应该将其包含在我的答案中。至于为什么不起作用，我自己也不确定。我认为也许 asp.net 做了一些事情来阻止它，但我对 asp 的了解还不够，无法确认或否认。
哈哈是的，我以为它只是一个占位符文本，但我很绝望。
其实我只是注意到了一点：div.image { content:url(http://i.imgur.com/6d3unPC.jpg) } 应该只是 .image

【解决方案2】：

如果我完全理解你想做什么，试试这个方法：

<div class="image">
 <a href="/css/masterCSS.css">
 <img src="insert path to your image">
 </a>
</div>

这是一种不需要 CSS 来广告内容的方法...如果您仍然想这样做，只需使用您的 CSS 并在我的 HTML 代码中删除第 3 行...

希望对你有帮助:)

【讨论】：

这行得通，但是当我取出第 3 行时，它不起作用。不过谢谢
是的，当然它确实不起作用，因为第三行是图像的路径......我很高兴我能提供帮助:)
如果你举个例子，至少做对了。您缺少结束 </div> 标记，我不确定 OP 是否希望在单击图像时打开他的 CSS 文件。

【解决方案3】：

这是一种创建简单图像的奇怪方法。我认为在大多数情况下，您最好只使用常规图像标签：http://www.w3schools.com/tags/tag_img.asp

此外，您可能希望按照本文中的建议对您的实现进行一些更改：https://css-tricks.com/almanac/properties/c/content/#article-header-id-2

但是，为了回答您的实际问题，您的代码无法正常工作，因为您的 HTML 从未引用文档头部的样式表。您需要像这样向样式表添加一个链接：

<link rel="stylesheet" href="/css/masterCSS.css" type="text/css">

【讨论】：

我希望图像像横幅一样伸展。我不需要为此使用 CSS 吗？
是的，但是您可以向图像标签添加一个类，使其宽度为 100% 或任何您想要的。像这样的：
<style> img.banner {width: 100%}</style><img class="banner" src="your/image/path/here">

【解决方案4】：

在这里您可以使用 .net 图片标签来预览图片。

<asp:Image ID="Image1" ImageUrl='<%# Eval("Give Your Url or path of the image here") %>' runat="server" Height="100" Width="100" />

【讨论】：

【解决方案5】：

在 div 标签内试试这个

<asp:Image runat="server" ImageUrl="~/Images/logo.jpg"/>

【讨论】：