Force divs Hintergrundbild fetch it's size

Question

Ich habe eine div, die unbedingt eine automatische Breite benötigt, die auf Textlänge innerhalb davon abhängt. Ich möchte einen blauen Halo, der als Hintergrundbild dieses Buttons angezeigt wird, wenn ich ihn mit meiner Maus schwebe.

Aber hier ist die Herausforderung, die ich nicht lösen kann: Ich möchte, dass blauen Halo Bild png die genaue Breite des div zu holen, möchte ich eine echte Verzerrung des Halo Bild ohne jegliche Verhältnis zu respektieren.

Wie kann ich dies erreichen, ohne einen absoluten Wert für die Breite des div zu geben? Und ohne etwas mehr als HTML und CSS3 zu verwenden?

HTML-Seite:

<div class="button"> 
    <p>Hover here!</p> 
</div> 

CSS Seite:

.button { 
    width: auto; 
    height: 80px; 
    line-height: 81px; 
    font-family: sans-serif; 
    display: inline-block; 
} 

.button:hover { 
    background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat; 
} 

JSFiddle: https://jsfiddle.net/ynwsmkrz/5/

Answer 1

Alles, was Sie tun müssen, ist eine background-size: cover; zum .button:hover wie folgt hinzu:

CSS:

.button { 
    width: auto; 
    height: 80px; 
    line-height: 81px; 
    font-family: sans-serif; 
    display: inline-block; 
} 

.button:hover { 
    background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat; 
    background-size: cover; 
} 

Es macht das Hintergrundbild das ganze div bedecken, ohne Zuschneiden es. Hoffentlich war meine Antwort hilfreich!