Фоновое изображение таблицы стыковки css вправо без растяжения по горизонтали

Question

Фоновое изображение таблицы стыковки css вправо без растяжения по горизонтали

0

У меня есть таблица и длинное изображение, я хочу поместить изображение в качестве фона для таблицы, только то, что я хочу, чтобы он состыковался справа, с шириной позволяет сказать 20% правого столбца ((таблица имеет 2 столбца)).

Таблица имеет высоту, равную сумме высот всех строк, поэтому, если браузер окон станет меньше, он создаст прокрутку на странице, и я хочу, чтобы мое изображение было таким же!

Как я могу достичь этого в css без использования js?? будь то ((css background image)) или <img> который будет исправлен некоторым правилом css.

Заранее спасибо.

Nour1991 29 нояб. 2013, в 04:36

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Nate · Accepted Answer · 2013-11-29T02-00-00.000Z

Я нахожу ваш вопрос немного запутанным, но вот удар по тому, что, я думаю, вы просите.

http://jsfiddle.net/nate/7PcFJ/

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, или иметь таблицу с фиксированной шириной. Если вы знаете ширину таблицы, легко установить ширину фонового изображения относительно нее.

Помогает ли это?

Большое спасибо за ваш ответ, на самом деле это очень помогло, это почти то, что я хочу, я буду использовать это для реализации функции, которую я хочу, большое спасибо =)