Question

我有一张桌子和一张长图片，我想把图片作为桌子的背景，只是我希望它停靠在右边，宽度可以说是右列的20％（（表有2列））。

该表的高度等于所有行的高度之和，因此如果Windows浏览器变小，它将在页面上创建一个滚动，我希望我的图像行为相同！

如何在不使用js的情况下在css中实现这一点？是否是（（css背景图片））或<img>标签，将由某些css规则修复。

先谢谢。

Answer 1

我发现你的问题有点令人困惑，但这是我认为你要求的东西。

table {
    border-collapse: collapse;
    background-image: url(http://placekitten.com/100/800);
    background-position: 100% 0;
    background-repeat: repeat-y;
    /* Set the background image to be 20% of the width of the table, and 800px */
    background-size: 20% 800px;
    width: 100%;
}

td {
    border: 5px solid orange;
}

在此示例中，我们在桌面上设置了一个高背景图像。我们使用background-position将其停靠在右侧。我们使用background-repeat告诉它只能垂直重复。然后我们使用background-size将其宽度设置为表格的20％。

在您的问题中，您要求将其设置为右列的20％。这更棘手 - 你必须在td s本身设置背景图像，然后，或有一个固定宽度的表。如果您知道表格的宽度，则可以轻松设置背景图像相对于它的宽度。

这有帮助吗？

css停靠表右侧没有水平拉伸的背景图像

1 个答案: