css - 背景图像 CSS 属性不显示在窄行上

Question

我将元素中的一个问题归结为:使用小背景图像，当设置为在整行上显示时，图像不会显示在表格的较小单元格中。设置宽度 >5% 突然解决了这个问题，我想知道为什么。

我将 bootstrap 4 与我编写的自定义类一起使用。这是一个删除了我元素中所有不必要部分的 fiddle :https://jsfiddle.net/5y4gs8co/11/请注意，单元格 5.x 不显示背景。

我已经测试了几张图片，只有特定尺寸的图片才会出现这种情况。这就是我卡住的地方——我不想在这里使用不必要的大图像，我认为可能有解决方案。

.progress-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAIAAADuA9qHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFwmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wNi0xOVQwOToyOTowOS0wNDowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wNi0xOVQwOToyOTowOS0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDYtMTlUMDk6Mjk6MDktMDQ6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YmVkMGY4ODEtZDI5ZS1jMzQ2LTg5OWMtYjI1YjQyMDI1ZDBlIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YjllYzJlZWEtZTJlOC1hMzQyLWE3MTAtMWM4Nzk1MjUxZjY4IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YTBmMGY4MDQtOGRmMC0yMTQ1LWI5ZjYtZGEyNzkxNDAyM2MwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YTBmMGY4MDQtOGRmMC0yMTQ1LWI5ZjYtZGEyNzkxNDAyM2MwIiBzdEV2dDp3aGVuPSIyMDE5LTA2LTE5VDA5OjI5OjA5LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZWQwZjg4MS1kMjllLWMzNDYtODk5Yy1iMjViNDIwMjVkMGUiIHN0RXZ0OndoZW49IjIwMTktMDYtMTlUMDk6Mjk6MDktMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MDui9AAAABVJREFUCJljfPv/NQNuwIRHjoGBAQCrIALb0W2etgAAAABJRU5ErkJggg==') !important;
  background-size: /*var(--percent)*/
  100% 100%;
  background-repeat: no-repeat;
}

更新:将错误报告给 chrome 错误跟踪器。另一个解决方法是添加 border: solid;到 <tr>元素

Answer 1

当 width 时，似乎是另一种奇怪的行为或表格在 % 中分配.这与 Bootstrap 无关。

我不知道为什么会发生这种情况，但是是的，<table> 有一些奇怪的行为。当宽度为 <td>在 % 中分配.我想这是其中之一。

也许 <table>从未设计用于处理 %值(value)。

但作为您问题的解决方案，您可以替换 width:5%至 width: {required}px ，或者您可以更改以下 .progress-bg 的样式规则CSS类:

.progress-bg {
  background-image: url({requiredUrl});
  background-repeat: repeat;
}