html - 如何使TD背景颜色以百分比为单位？

Question

我有一张桌子，我想以百分比为单位提供背景颜色，但不填充它。我可以做相反的事情：

<table border="1" width="100%''">
<tr>
  <td style="width: 50%; background-color: red;" class="bg">....</td><td style="width: 50%"></td>
</tr>
</table>

.bg
{
    background-size: 10% 100%, 25% 100%;
    background-image: url('https://www.hrenko.hu/wp-content/uploads/2018/03/Untitled-design-5.png'), url('https://www.hrenko.hu/wp-content/uploads/2018/03/Untitled-design-5.png');
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;    
}

https://jsfiddle.net/jarhbdLc/

看到那两张谷歌图片了吗？好吧，我想要这样的东西——但恰恰相反！我希望这个背景图像从 10%-25% 而不是 0-10%、25%-100% 填充！怎么做？

标签： htmlcss

Answer 1

Use a linear-gradient

div {
  border: 1px solid;
  padding: 10px;
  background: linear-gradient(to right, transparent 10%, red 10% 25%, transparent 0) no-repeat;
}

<div></div>

---

Applying the fix.

<table border="1" width="100%''">
  <tr>
    <td style="width: 50%; background: linear-gradient(to right,transparent 10%, red 10% 25%, transparent 0) no-repeat;" class="bg">....</td>
    <td style="width: 50%"></td>
  </tr>
</table>