Wordpress/CSS - Bild nicht angezeigt

Question

Das erste, was ich hervorheben möchte, ist, dass ich fast nichts über CSS weiß. Im Moment versuche ich, eine Website mit Wordpress zu erstellen, und ich möchte ein Bild hinzufügen, das wie ein Link funktioniert und sich zu einem anderen Bild ändert, wenn man mit der Maus darüber fährt. fand ich folgende Anleitung dafür: https://www.organicweb.com.au/17523/wordpress/image-link-css/

ich genau das getan habe, was dieses Tutorial sagt (im Grunde ist es mehr oder weniger einfach kopieren & Paste), aber mein Bild wird nicht angezeigt und ich habe absolut keine Ahnung, warum. Noch seltsamer ist, dass das Bild zeigt, wenn ich eine bestimmte Bildgröße im Stylesheet verwende (zum Beispiel: "width: 300px; height: 250px;"). Aber es funktioniert nicht, wenn ich "background-size: cover;", "background-size: contain;", "background-size: auto;" oder irgendeine andere Möglichkeit.

Dies funktioniert:

.ge-link { 
background-image: url(http://.../uploads/2017/02/325484_1280.jpg); 
background-repeat: no-repeat; 
background-position: center; 
background-size: cover; 
display: block; 

ich ratlos bin:

.ge-link { 
background-image: url(http://.../wp-content/uploads/2017/02/325484_1280.jpg); 
background-repeat: no-repeat; 
background-position: center; 
width: 300px; 
hight: 250px; 
display: block; 

Das funktioniert nicht! :(Hat jemand eine Idee, was ich falsch machen könnte?

Answer 1

was ich denke, Sie könnten beide Bilder zusammen in Ihrem HTML verwenden und verwenden: Hover, um ein anderes Bild zu zeigen, sobald das Hauptbild schwebt:

HTML

<a id="linkId" href="www.yourlink"> 

<img class="image_on" src="yourFirstImage.png" alt="picture"> 

<img class="image_off" src="yourSeconfImage" alt="picture 2"> 


</a> 

CSS

.image_off, .link-block:hover .image_on{ 
    display:none 
} 
.image_on, .link-block:hover .image_off{ 
    display:block 
} 

Answer 2

.ge-link ist kein image-Tag, es ist nur ein Container, der ein Hintergrundbild hat. im zweiten Fall , Sie haben keine Höhe für diesen Container definiert (auch keine Breite, aber das ist nicht die primäre Ursache für Ihr Problem), so dass der Container 0 Pixel hoch ist - keine Höhe! Es enthält tatsächlich das Hintergrundbild, aber mit 0 zeigt es nichts.

Verwenden Sie also nur diese Breiten- und insbesondere Höheneinstellungen, solange Sie das Bild als Hintergrundbild verwenden. Oder verwenden Sie ein echtes Bildelement (<img>).

PS: Sie können die Breite verwenden/Höhenverstellung undbackground-size: cover - funktioniert perfekt ...