Как скрыть текст с помощью CSS?

Question

Как сделать foo невидимым с помощью CSS (CSS3 при необходимости), сохраняя при этом bar и fizz видимыми?

<table>
  <tr>
    <td>
      <textarea>bar</textarea>
      <input type='button' title='fizz' />
      foo
    </td>
  </tr>
</tbody>

Допускается использование foo того же цвета, что и фона, но дело в том, что фон - это изображение, поэтому - foo должен быть прозрачным, а не сплошным цветом.

JavaScript тоже не вариант.

Изменить HTML тоже нельзя.

Есть идеи?

Answer 1

Это хорошо работало в IE8 и Firefox (IE7 оставлял маленькие точки для слов, что, я думаю, если вы установите font-color для чего-то, что смешивается с фоновым изображением, это может подойти. Обратите внимание, что это не влияет ни наtext-area или input для любого текста в них.

td {font-size: 0;}

ДОБАВЛЕНО В РЕДАКТИРУ

WOW Я имею в виду, действительно!Это работало на IE7-8, Firefox и Safari

td {visibility: hidden}
td textarea,
td input {visibility: visible;}

В качестве примечания, я проверил это с элементами, заключенными в div, а не в таблицу, я даже сделал div в div, а внутренний div показывает, а другое содержимое скрыто.

Очевидно, свойство visibility воздействует на элемент и (в отличие от opacity) распространяется на дочерние элементы по наследству, так чтоесли один явно устанавливает дочерний элемент visibility, он больше не наследует hidden, а использует собственную настройку visible, и тот факт, что оболочкой является hidden, не имеет значения.

Answer 2

РЕДАКТИРОВАТЬ: Скотт лучше.Используйте его.

Я не думаю, что правильное решение будет красивым.

td {
    position: relative;
    left: 9001px;
}

textarea {
    position: relative;
    right: 9001px;
}

Answer 3

Если вам не нужно поддерживать IE, тогда легко установить прозрачный текст:

table {
    background-color: cyan;
}
td {
    color: rgba(255,255,255,0);
}
td textarea, td input {
    color: #000;
}

Answer 4

Как насчет обратного предложения Амбер -

Установите переполнение на overflow: hidden на ТД, установите размер там, где он находится сейчас, и добавьте огромный padding-bottom на textarea или button.

Answer 5

упс ... должен был прочитать ОП чуть более внимательно.Думаю, что следующее не сработает, поскольку изменение html не вариант.

Установить класс css для контейнера, который вы хотите скрыть (текстовое поле?):

...
   <textarea class="hideme">bar</textarea>
...

и следующий css:

.hideme {
   display: hidden;
}

'hidden' заставляет элемент исчезнуть (он буквально не отображается), но все равно учитывается в потоке документа и занимает место, которое обычно занимает.Если вы хотите, чтобы он буквально исчез и не оказывал никакого влияния на документ, используйте display: none.

Answer 6

Установите размер td равным размеру textarea (через CSS width и height), затем установите overflow: hidden на TD, чтобы текст, который вы хотите скрыть за пределами ограничительной рамки?

Answer 7

Вы должны поместить его в контейнер, как div , затем спрятать контейнер