Question

这是我的代码。我正在尝试将一个名为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” ＆GT;

<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;

Answer 1

使用div并设置background属性：

<强> HTML ：

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

<强> CSS ：

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

Answer 2

您正在尝试使用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; }

希望这有帮助！

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

2 个答案: