以 css、html 显示图像
Posted
技术标签:
【中文标题】以 css、html 显示图像【英文标题】：Image display in 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图片标签来预览图片。
【参考方案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"/>
【讨论】：
以上是关于以 css、html 显示图像的主要内容，如果未能解决你的问题，请参考以下文章