Question

我已经在项目中解决了一个问题：使用小的背景图像，当设置为在整个行中显示时，图像不会显示在表格的较小单元格中。设置宽度> 5％突然可以解决此问题，我想知道为什么。

我将Bootstrap 4与我编写的自定义类一起使用。这是一个小提琴，删除了我项目的所有不必要的部分：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

考虑在th和td标签上添加背景。

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

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Title</th>
          <th scope="col">Description</th>
          <th scope="col" style="width:5%">5%</th>
          <th scope="col" style="width:6%">6%</th>
        </tr>
      </thead>

      <!-- Table Body -->
      <tbody>
        <tr class="progress-bg">
          <th scope="row">
            First Item, With A Longer Title
          </th>
          <td>
            A longer description, neat!
          </td>
          <td>
            5.1
          </td>
          <td>
            6.1
          </td>
        </tr>
        <tr class="progress-bg">
          <th scope="row">
            Second Item, With A Longer Title
          </th>
          <td>
            A longer description, neat!
          </td>
          <td>
            5.2
          </td>
          <td>
            6.2
          </td>
        </tr>
        <tr class="progress-bg">
          <th scope="row">
            Third Item, With A Longer Title
          </th>
          <td>
            A longer description, neat!
          </td>
          <td>
            5.3
          </td>
          <td>
            6.3
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 2

在Private Sub Animation_Tick(sender As Object, e As EventArgs) Handles Animation.Tick If Player.Bounds.IntersectsWith(Ground.Bounds) Then Animation.Stop() Else Player.Top += 10 End If End Sub中分配了width时，似乎就像是另一个奇怪的行为或表。这与引导无关。

我不知道为什么会这样，但是是的，当在%中分配了<table>的宽度时，<td>有一些奇怪的行为。我想这就是其中之一。

也许%从未设计来处理<table>的值。

但是，作为解决问题的方法，您可以将%替换为width:5%，也可以更改以下width: {required}px css类的样式规则：

.progress-bg

Answer 3

@ sudipto-roy提供了一些很好的见解，并且在进行了更多测试之后，仅在Chrome 75，IE 11和Edge 18中才发生这种情况。FF67和Opera 60正确地渲染了它。我的解决方案是提高图像尺寸，同时注意将其压缩到base64的效果。在我的情况下，图片的尺寸增加了一倍，但仅花费了约20字节。

我希望我能对造成这种情况的确切条件有更多的了解，但是放大图像似乎是一个不错的解决方法。

背景图片CSS属性不会显示在狭窄的行上

3 个答案: