HTML: Wie fügt ein Bild mit Hilfe von CSS als verknüpfte Stylesheet

Hier ist mein code. Ich versuche, ein Bild hinzuzufügen, genannt lg.png in HTML und Bearbeiten können, um die Länge/Breite in der css-Datei. Die lg.png liegt im gleichen Ordner wie die index.html und styles.css

Versucht, online-Suche für diese Antwort aber kann nicht scheinen, um viel Glück.

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;

  • Hintergrundbild von einem Bild? nehmen Sie ein div statt das Bild und das tun.
  • Ist es ein Gültiger Vanille CSS? Sie können nicht geschachtelt werden Stile (img#lg innerhalb body) BTW img#lg übereinstimmen, wird nicht das Bild (weil es hat nicht lg - id).
  • Sie müssen zum beheben des öffnenden body-tag und ich sehe keinen link in der HTML-Datei zur CSS-Datei.
InformationsquelleAutor user3245569 | 2014-01-28
  1. 3

    Sie versuchen, zu verwenden CSS-Selektor img#lg was keinen Sinn macht. Sagen Sie CSS auf die Suche nach einem Bild mit der id von 'lg', aber Sie nicht jede id zu deinem Bild.

    Auch die Einstellung der background-image:ur(lg.png) ist nicht das gleiche wie <img src='lg.png'>.

    Um es zu beheben:

    1. Id hinzufügen, um Ihr Bild
    2. Target die id in deinem CSS.

    Ändern Sie Ihre HTML:

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

    CSS:

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

    Wenn Sie wollte, ändern CSS-Eigenschaften ALLER Bilder, die Sie verwenden würden, die folgenden:

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

    Hoffe, das hilft!

    • Danke für Eure Hilfe, ich bin noch immer ein paar Fehler, da es nicht das Bild anzeigen. Fehler: "In XHTML 1.0 Strict den tag <html> nicht enthalten-tag <img>
    • wo ist das Bild? ist es in dem gleichen Ordner mit der HTML-oder einem Unterordner?
    • Es ist im gleichen Ordner wie die html-Datei.
    • Ich habe auch aktualisiert, den original-Beitrag mit dem, was ich bin derzeit mit.
    • warum sind Sie ausschließlich mit xhtml? und nicht einfach nur <!DOCTYPE html>?
    • Ich war in der Lage zu basteln mit den Dingen und bekommen es zu arbeiten mit 0 Fehlern Ihre Hilfe. Ich entfernte den strengen Aspekt, und ich änderte ein paar Dinge, um es gut Aussehen. Ehrlich gesagt, war ich über die strenge, weil mein professor hat es mir gegeben, mit ihm zu arbeiten auf diese Weise. Ich weiß, es war nicht unbedingt notwendig, aber ich habe es zum Wohle Beispiel. Ich danke Ihnen sehr für Ihre Hilfe. Ich sollte in der Lage sein, den rest dieses getan ziemlich leicht
    • erzählen Sie Ihren professor, es ist 2014 🙂 er kann nur wollen, Sie zu zwingen, use strict-markup für pädagogische Zwecke...

    InformationsquelleAutor dev7
  2. 3

    Verwenden div und legen Sie die background Eigenschaft:

    HTML:

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

    CSS:

    .my_image
{
    background:URL('path/to/img.png');
    width:100px;
    height:100px;
}
    • Einige änderungen vorgenommen, was im Moment arbeite ich mit, noch immer ratlos, wohin es gehen in die richtige Richtung, da das Bild immer noch nicht angezeigt
    InformationsquelleAutor sundance
Schreibe einen Kommentar