html - 背景在调整大小时不会填满 div 的整个高度

Question

在下面的示例中，当文本有两行时，文本的背景颜色不会出现：

#Group_82 {
	position: absolute;
	width: 544px;
	height: 66px;
	left: 4px;
	top: 10px;
	overflow: visible;
	animation: resize 2500ms linear 0s infinite;
}

.Rectangle_445 {
	position: absolute;
	overflow: visible;
	width: 100%;
	height: 66px;
	left: 0px;
	top: 0px;
}

#text1 {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 10px;
	overflow: visible;
	height: 14px;
	text-align: left;
	font-family: Helvetica Neue;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	color: rgba(112,112,112,1);
	background-color: lightblue;
}

@keyframes resize {
  0% {
    width: 92%;
  }
  37.5% {
    width: 92%;
  }
  50% {
    width: 45%;
  }
  87.5% {
    width: 45%;
  }
  100% {
    width: 92%;
  }
}

<div id="Group_82" class="resize92to50">
  <svg class="Rectangle_445">
    <rect fill="rgba(234,234,234,1)" stroke="rgba(183,183,183,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Rectangle_445" rx="0" ry="0" x="0" y="0" width="100%" height="66">
    </rect>
  </svg>
  <div id="text1">
    <span>The text is anchored to the left and right edge of the group</span>
  </div>
</div>

标签： htmlcss

Answer 1

你好我有解决你的问题。

<div id="Group_82" class="resize92to50">
    <svg class="Rectangle_445">
        <rect fill="rgba(234,234,234,1)" stroke="rgba(183,183,183,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Rectangle_445" rx="0" ry="0" x="0" y="0" width="100%" height="66">
        </rect>
    </svg>
    <div id="text1">
        <span style="background-color: lightblue;">The text is anchored to the left and right edge of the group</span>
    </div>
</div>

在（标签）中添加背景颜色。不要设置“text1”div的背景颜色...