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


HTML: How to add an image using CSS as linked style sheet

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

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

HTML：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    yournetid
    <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"/>

       
<body>
    <p>

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

CSS：

1
body {

}

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

相关讨论

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

同样，设置background-image:ur(lg.png)与也不相同。

要解决这个问题：

  • 为您的图像添加ID
  • 在您的CSS中定位ID。

    • 更改您的HTML：

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

    CSS：

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

    如果要更改所有图像的CSS属性，请使用以下命令：

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

    希望这可以帮助！

    相关讨论

    使用div并设置background属性：

    HTML：

    1
     

    CSS：

    1
    2
    3
    4
    5
    6
    .my_image
    {
        background:URL('path/to/img.png');
        width:100px;
        height:100px;
    }
    相关讨论