限制高度多个背景图像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

你有正确的想法。将SELECT DISTINCT B.CLT_NBR , CASE WHEN B.CLT_NBR IN (SELECT CLT_NBR FROM A) THEN 'YES' ELSE 'NO' END AS CHECK FROM B 设置为background-clip是阻止背景进入元素下方的正确选项，但问题出在content-box上。由于您已将background-position设置为background-position（这意味着框的右边缘），因此right是172px，它将永远不会显示，等于图像的宽度。

而不是将padding-right设为background-position或298px。当使用这些选项中的任何一个时，图像的最左侧2px将落在框的内容区域内，因此可见。

calc(100% - 2px)

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