Das Hintergrundbild wird nicht angezeigt, wenn es sich in einem #id-Selektor befindet, aber im Body

angezeigt wird.

Ich erstelle gerade die Google-Startseite für Odin neu und versuche, das Logo als Hintergrundbild festzulegen. Immer wenn ich das Hintergrundbild und die URL in den Body für CSS lege - wird das Logo angezeigt. Aber wenn ich dann die genauen Zeilen in das Logo kopiere und einfüge, wird das Bild überhaupt nicht angezeigt!Das Hintergrundbild wird nicht angezeigt, wenn es sich in einem #id-Selektor befindet, aber im Body

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#logo { 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png"); 
 
    background-size: 272px 92px; 
 
    background-repeat: no-repeat; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
    <title>Google</title> 
 
</head> 
 

 
<body> 
 
    <div class="main"> 
 
    <a href="www.google.co.uk" id="logo"></a> 
 
    </div> 
 
</body> 
 

 
</html>

Irgendwelche Ideen, wo ich falsch gehe?

Quelle

2017-02-02 nicky heise

'' ist leer, so dass es eine Breite von Null und Null-Höhe aufweist. – Turnip

Ich habe versucht, vorher eine Höhe und Breite der ID hinzuzufügen, aber es macht keinen Unterschied? –

Das liegt daran, dass "" -Tags Inline-Elemente sind. Sie können keine Höhe oder Breite festlegen. Sie erhalten ihre Dimensionen von ihrem Inhalt. Füge '#logo {display: block; } 'und Sie können die Höhe und Breite einstellen. – Turnip

Das Anker-Tag enthält keinen Inhalt.

Wenn Sie keine Inhalte innerhalb Anker-Tag geben wollen, sollten Sie Anzeigeblock und bieten und Höhe machen Oder Sie auch inline-block Bereitstellung Breite und Höhe

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
    <title>Google</title> 
    </head> 
    <body> 
     <div class="main"> 
      <a href="www.google.co.uk" id="logo"></a> 
     </div> 
    </body> 
</html> 



* { 
    padding: 0; 
    margin: 0; 
    border: 0; 
    box-sizing: border-box; 
} 

body { 
    width: 100%; 
    height: 100%; 
} 

#logo { 
    background: url("imgs/google-logo.png"); 
    background-size: 272px 92px; 
    background-repeat: no-repeat; 
    display: block; 
    height: 300px; 
}

Quelle

2017-02-02 11:53:47 Pradeep

Hier können wir 'height' genauso einstellen wie' background-size: '' height' wie Einstellung 'height: 92px;' Wir werden nicht mit den nächsten 'elements'-Alignments (Position) verwechselt. –

Anker verwenden können (a Tag) sind standardmäßig inline Elemente, dh die Größe wird basierend auf ihrem Inhalt automatisch generiert. Da Ihr Tag leer ist, gibt es keine Größe und nichts rendert.

können Sie die display-block oder inline-block ändern (mehr über die beiden here lesen) und width und height bieten.

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#logo { 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png"); 
 
    background-size: 272px 92px; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    width: 272px; 
 
    height: 92px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
    <title>Google</title> 
 
</head> 
 

 
<body> 
 
    <div class="main"> 
 
    <a href="http://www.google.co.uk" id="logo"></a> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-02-02 12:07:30

Das Hintergrundbild wird nicht angezeigt, wenn es sich in einem #id-Selektor befindet, aber im Body

Antwort

Verwandte Themen