如何在css的桌面上得到圆角，同时又有一个背景图片

5rgfhyps 于 2023-03-09 发布在其他

关注(0)|答案(1)|浏览(89)

我正在尝试创建一个看起来像水平条形图的图片，在中性背景上用颜色显示百分比，并在图片顶部添加描述（类似于this，但明显没有移动/响应）。由于网站的限制，我将上传这个图片，它需要使用html表格和基本css创建。
我想把各行的角弄圆，我已经发现这只能通过改变单元格的边界半径来实现，而不是行。但是，背景图像仍然是一个矩形。

table {
  border-collapse: separate;
  border-spacing: 0 0.75vw;
  width: 35vw;
  margin: 1vw auto auto auto;
}

td {
  border: solid 2px white;
  padding: 0.5vw;
}

td:first-child {
  border-top-left-radius: 0.5vw;
  border-bottom-left-radius: 0.5vw;
}

td:last-child {
  border-bottom-right-radius: 0.5vw;
  border-top-right-radius: 0.5vw;
}

.chartrow {
  background-image: linear-gradient(red, red);
  background-color: orange;
  background-position: left;
  background-repeat: no-repeat;
}

.row1 {
  background-size: 6.5%;
}

.row2 {
  background-size: 20.3%;
}

.container {
  background-color: green;
  width: 50vw;
  margin: auto;
}

<div class="container">
  <table>
    <tbody>
      <tr class="chartrow row1">
        <td>Answer 1</td>
        <td>6.5%</td>
      </tr>
      <tr class="chartrow row2">
        <td>Answer 2</td>
        <td>20.3%</td>
      </tr>
    </tbody>
  </table>
</div>

(The白色边框仅用于显示我想要实现的目标）
有没有一种方法可以使背景图像的角变圆，或者完全用另一种方法在背景中显示条形图？

css

来源：https://stackoverflow.com/questions/75655759/how-to-get-rounded-corners-on-a-css-tablerow-while-also-having-a-backgroundimage

1条答案

按热度按时间

z0qdvdin1#

默认情况下，你不能用这种方式来设置<tr>的样式，因为它们有display: table-row，但是你可以将它们设置为display: block（或者flex，或者任何你需要的），并且可以用你期望的方式来设置它们的样式。

table {
  border-collapse: separate;
  border-spacing: 0 0.75vw;
  width: 35vw;
  margin: 1vw auto auto auto;
}

td {
  border: solid 2px white;
  padding: 0.5vw;
}

td:first-child {
    flex-grow: 1;
}

td:last-child {
    width: 6ch; /* fixed so it’s the same in all rows. wouldn’t need to do it like this once subgrid lands. */
}

.chartrow {
  background-image: linear-gradient(red, red);
  background-color: orange;
  background-position: left;
  background-repeat: no-repeat;
  display: flex;
  border-radius: .5vw;
  overflow: hidden; /* so the background doesn’t overflow the rounded border */
  margin-block: .5rem;
}

.row1 {
  background-size: 6.5%;
}

.row2 {
  background-size: 20.3%;
}

.container {
  background-color: green;
  width: 50vw;
  margin: auto;
}

<div class="container">
  <table>
    <tbody>
      <tr class="chartrow row1">
        <td>Answer 1</td>
        <td>6.5%</td>
      </tr>
      <tr class="chartrow row2">
        <td>Answer 2</td>
        <td>20.3%</td>
      </tr>
    </tbody>
  </table>
</div>

赞(0）回复(0）举报 2023-03-09

我来回答

如何在css的桌面上得到圆角，同时又有一个背景图片

1条答案

相关问题

热门标签

最新问答