CSS多个背景不能对齐到相对大小< div>

kq0g1dla 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(107)

我无法找到一种方法来对齐超过3个相对大小的CSS背景而不重叠。
当我创建4个大小为25%的背景时，我希望将一个放置在0%，一个放置在25%，一个放置在50%，一个放置在75%，从而导致一个100%填充的div。但行为似乎是将最后一个背景锚定在其右侧，第一个锚定在其左侧，其余背景锚定在其中心。
正确定位中心锚定背景需要将其放置在33.333（重复）%，这自然意味着浏览器会进行舍入，导致重叠，导致2个透明背景重叠的暗线。

.multi-gradiant-background {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: radial-gradient(ellipse at center bottom, rgba(0, 0, 255, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%), radial-gradient(ellipse at center bottom, rgba(0, 255, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%), radial-gradient(ellipse at center bottom, rgba(255, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%), radial-gradient(ellipse at center bottom, rgba(0, 0, 255, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%);
  background-repeat: no-repeat;
  background-size: 25% 100%, 25% 100%, 25% 100%, 25% 100%;
  background-position: 0% top, 25% center, 50% center, 100% center;
  background-clip: border-box, border-box, border-box, border-box;
}

<div class="multi-gradiant-background">

</div>

这里有一个简单的小提琴来演示这个问题：https://jsfiddle.net/8jpwgous/1/将位置设置为33.33%和66.66%可能在某些屏幕上工作，但如果对浏览器窗口的大小进行足够的调整，舍入将导致出现暗线。
虽然这个例子可以通过放置两个50%宽度的div来解决，每个div上有两个背景，但我想使用它的实际情况实际上需要7个背景来对齐，不幸的是，这并不容易分解为2或3个相等的组。

css

来源：https://stackoverflow.com/questions/75801936/css-multiple-backgrounds-cant-be-aligned-to-a-relative-sized-div

1条答案

按热度按时间

xeufq47z1#

这个问题可以通过将每个背景放入一个单独的div中，然后使用display来解决：flex来对齐这些div，而不会出现明显的舍入问题。

.multi-gradiant-lights {
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: stretch;
}

.shadow1,
.shadow2,
.shadow3,
.shadow4 {
    background: rgba(0, 0, 0, 0.2);
    height: 100%;
}

.light1,
.light2,
.light3 {
    background: radial-gradient(ellipse at center bottom, rgba(224, 213, 47, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%);
    background-size: 100% 120%;
    background-position: center bottom;
    height: 100%;
    flex: 1 1 15%;
}

.shadow1 {
    flex: 1 1 2%;
}

.shadow2 {
    flex: 1 1 6%;
}

.shadow3 {
    flex: 1 1 6%;
}

.shadow4 {
    flex: 0 1 35%;
}

<div class="multi-gradiant-lights">
    <div class="shadow1"></div>
    <div class="light1"></div>
    <div class="shadow2"></div>
    <div class="light2"></div>
    <div class="shadow3"></div>
    <div class="light3"></div>
    <div class="shadow4"></div>
</div>

我仍然觉得与多个背景相关的CSS属性没有“从右上角计算的所有水平位置”设置是非常不寻常的。这使得间隙/重叠无法避免。
但这个问题可以用其他方法解决。

赞(0）回复(0）举报 2023-04-01

我来回答

CSS多个背景不能对齐到相对大小< div>

1条答案

相关问题

热门标签

最新问答