在下面的示例中,当文本有两行时,文本的背景颜色不会出现:
#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>
最佳答案
您好,我已经解决了您的问题。
<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 的背景颜色...
关于html - 调整大小时,背景不会填满 div 的整个高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57547355/