`Hintergrundgröße: cover` fill up border

Question

Gibt es eine Möglichkeit, den Effekt von background-size:cover zu erreichen, während Sie den Bereich hinter der Grenze füllen. Um das besser zu veranschaulichen, sehen Sie sich das folgende Bild an: Das linke Bild verwendet background-size:cover und füllt die ganze Box unabhängig davon ob das Bild Hoch- oder Querformat ist, aber hinter den halbtransparenten oberen und unteren Rändern versteckt ist. Das zweite Bild wird mit einer background-size: auto 260px Regel erstellt, die genau den gewünschten Effekt liefert, funktioniert aber nur, weil ich weiß, dass der Hintergrund in diesem Fall Landschaft ist (und dass die Box selbst 200px und der Rahmen 30px ist).

A JSFiddle, die verwendet wird, um die oben genannten zwei Boxen zu machen found hier sein kann. Es fällt mir schwer zu glauben, dass dies mit reinem css nicht möglich ist, aber selbst offen für javascriptbasierte Lösungen (obwohl ich eine hackische Javascript-Lösung aufbauen könnte, habe ich keine Ahnung, wie man auf relativ sauber aussieht ...). Ich hoffe immer noch, dass es eine CSS-Möglichkeit gibt, dies zu tun.

Answer 1

Dies kann durch Setzen der background-origin Eigenschaft auf border-box erreicht werden:

#one{ 
    background-size:cover; 
    background-origin: border-box; 
} 

fiddle

Es gibt auch eine background-clip Eigenschaft, die wie es sich anhört sollte das tun, aber nicht - da die Hintergrund erstreckt sich standardmäßig unter der Grenze, die Frage ist eher, warum background-size:cover/contain/% die Grenze nicht berücksichtigen. Rückwärtskompatibilität, nehme ich an.