Begrenzung der Höhe mehrere Hintergrundbilder CSS

Question

Bitte ertragen Sie mit mir, wie ich versuchen werde, dies so gut wie möglich zu erklären. Ich versuche, einen veränderbaren 3D-Würfel zu erstellen, und ich habe dies bisher mit Hintergrundbildern in den Klassen .back und .front gemacht. Nun, das Problem ist, dass mein Hintergrund namens "right-side-fill.jpg" (.front) den ganzen Weg bis hinter die untere Kante füllt.

Bild "bottomfront-side-fill.jpg" ist ein blaues Pixel mit weißer Füllung am Boden die 45 ° -Linie zu verschleiern. Ich habe versucht background-clip und background-origin, aber kann nicht scheinen, es richtig zu machen.

Demo: http://rollodesigns.com/fishyfish/kalkylatorn.php

.back{ 
    background: url('../img/top-left-corner.jpg'), 
      url('../img/top-right-corner.jpg'), 
      url('../img/bottom-left-corner.jpg'), 
      url('../img/top-side-fill.jpg'), 
      url('../img/bottom-side-fill.jpg'), 
      url('../img/left-side-fill.jpg'); 
    background-position: top left, top right, bottom left, top, bottom, left; 
    background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-y; 

    padding-right: 103px; 
    padding-bottom: 100px; 
} 

.front{ 
    background: url('../img/right-side-fill.jpg'), 
      url('../img/top-side-fill.jpg'), 
      url('../img/bottomfront-side-fill.jpg'), 
      url('../img/left-side-fill.jpg'), 
      white; 
    background-position: right, top, bottom, left; 
    background-repeat: repeat-y, repeat-x, repeat-x, repeat-y; 

    padding-right: 172px; 
    padding-bottom: 133px; 
} 


<div class="aquarium-wrapper"> 
<div class="back" style="position: relative; width:300px;height:300px;"></div> 
<div class="front" style="position:absolute; top:0; left:0; width:300px;height:300px;"></div> 

Answer 1

Sie hatte die richtige Idee im Kopf. Die Einstellung background-clip als content-box ist die richtige Option, um den Hintergrund daran zu hindern, unter das Element zu gehen, aber das Problem lag bei background-position. Da Sie background-position als right gesetzt hatten (was rechte Kante des Kastens bedeutet), würde es nie gezeigt werden, da das padding-right 172px ist, das der Breite des Bildes entspricht. Geben Sie background-position als 298px oder calc(100% - 2px) ein. Wenn eine dieser Auswahlmöglichkeiten verwendet wird, werden die am weitesten links liegenden 2px des Bildes in den Inhaltsbereich der Box fallen und somit sichtbar sein.

.front{ 
    background: url('../img/right-side-fill.jpg'), 
      url('../img/top-side-fill.jpg'), 
      url('../img/bottomfront-side-fill.jpg'), 
      url('../img/left-side-fill.jpg'), 
      white; 
    background-position: calc(100% - 2px), top, bottom, left; 
    background-repeat: repeat-y, repeat-x, repeat-x, repeat-y; 
    background-clip: content-box, content-box, content-box, content-box, border-box; 
    padding-right: 172px; 
    padding-bottom: 133px; 
} 

Hinweis: Die Bildausrichtung ist nicht richtig, und Sie bräuchten die Breite/Höhe der Elemente anzupassen, aber ich denke, dass, um herauszufinden, wäre in der Lage.