限制高度多张背景图片CSS

Question

请耐心等待，我会尽我所能解释这一点。我正在尝试创建一个可变的 3D 立方体，到目前为止，我已经使用类 .back 和 .front 上的背景图像完成了此操作。现在，问题是我的名为 "right-side-fill.jpg" (.front) 的背景一直填充到底部边缘。

图像 "bottomfront-side-fill.jpg" 是一个蓝色像素，底部有白色填充以遮盖 45° 线。我试过 background-clip 和 background-origin，但似乎无法正确处理。

演示：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

你的想法是正确的。将 background-clip 设置为 content-box 是阻止背景低于元素的正确选项，但问题出在 background-position 上。由于您已将 background-position 设置为 right（这意味着框的右边缘），因此它永远不会显示为 padding-right 是 172px，等于图像的宽度。

相反，将 background-position 设置为 298px 或 calc(100% - 2px)。当使用这些选项中的任何一个时，图像最左边的 2px 将落在框的内容区域内，因此将是可见的。

.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;
}

注意：图像对齐不正确，您需要调整元素的width/height，但我认为您可以解决这个问题.

限制高度多张背景图片CSS

Limiting height multiple background images CSS

css

background-image