HTML：如何使用 CSS 作为链接样式表添加图像答案

【问题标题】：HTML: How to add an image using CSS as linked style sheetHTML：如何使用 CSS 作为链接样式表添加图像
【发布时间】：2014-02-20 03:52:21
【问题描述】：

这是我的代码。我正在尝试将名为 lg.png 的图像添加到 HTML 中，并能够编辑 css 文件中的长度/宽度。 lg.png 与 index.html 和 styles.css 位于同一文件夹中

尝试在网上寻找这个答案，但似乎没有任何运气。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
    <title>yournetid</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css"/>   
</head>
<img id="my_image" src="lg.png" alt="image error"/>

        &nbsp;
<body>
    <p>
        Here's some awesome pictures!
    </p>
</body>

CSS：

body {

}

img#lg background:url(lg.png); width:200px; height:100px;

【问题讨论】：

图片的背景图片？取一个div 而不是图像，然后这样做。
它是一个有效的原生 CSS 吗？你不能嵌套样式（img#lg 在 body 里面）顺便说一句 img#lg 不会匹配你的图像（因为它没有 lg id）。
您需要修复开始的正文标记，我在 HTML 文件中看不到 CSS 文件的链接。

标签： html css

【解决方案1】：

您正在尝试使用 CSS 选择器 img#lg，这没有任何意义。您告诉 CSS 查找 id 为“lg”的图像，但您没有为图像设置任何 id。

另外，设置background-image:ur(lg.png) 与<img src='lg.png'> 不同。

修复它：

为您的图片添加 id
在您的 CSS 中定位 id。

更改您的 HTML：

 <img id="my_image" src="lg.png" alt="image error">

CSS：

#my_image {width:200px; height:100px; }

如果您想更改所有图片的 CSS 属性，您可以使用以下代码：

img {width:200px; height:100px; }

希望这会有所帮助！

【讨论】：

感谢您的帮助，我仍然遇到一些错误，因为它没有显示图像。错误：“在 XHTML 1.0 Strict 标签中不能包含标签
@user3245569 图片在哪里？它是在 HTML 的同一文件夹中还是在子文件夹中？
它与html文件在同一个文件夹中。
我还用我目前正在使用的内容更新了原始帖子。
@user3245569 你为什么使用严格的 xhtml？而不仅仅是 ?

【解决方案2】：

使用div 并设置background 属性：

HTML：

<div class="my_image"></div>

CSS：

.my_image
{
    background:URL('path/to/img.png');
    width:100px;
    height:100px;
}

【讨论】：

对我目前正在使用的内容进行了一些更改，但由于图像仍然没有显示出来，仍然不知道该往哪里走