Как сделать прозрачную таблицу в html

Как сделать HTML-таблицу частично прозрачной?

Как я могу сделать его частично прозрачным? Есть ли способ сделать это без CSS? Если не то, что является способом CSS?

5 ответов

Вы можете попробовать это в своем html файле:

И это в вашем файле css:

Это устанавливает значения rgba RED GREEN BLUE ALPHA, 255,255,255 = белый, 0,0,0 = черный, а значение 0,5 в конце (ALPHA) находится между 0 и 1, где 1 непрозрачно и 0 прозрачно. Надеюсь, это поможет.

В вашем случае # 151515 (HEX CODE) переводится на (21, 21, 21, 0,5) (RGBA), где A равно 50% прозрачности.

Вы можете установить непрозрачность или прозрачность фона в CSS, как показано ниже

Вышеизложенное делает его 60% прозрачным. Надеюсь это поможет.

Способ изменить цвет фона и непрозрачность — это добавить этот атрибут к вашему css.

background-color: rgba(100,200, 0, 0.5); (не фоном)

Если вы хотите изменить непрозрачность фона + текста, вы можете использовать:

Ответ на старый пост, но это все еще актуально, поскольку я просто ссылался на него =)

Слишком. вы можете использовать фейерверк или (предположительно) фотошоп для создания всего черного изображения.png (только черный ящик). Установите желаемую прозрачность на панели инструментов и установите указанную фотографию в качестве фонового изображения стола. По умолчанию он повторяется, поэтому заполнит вашу таблицу. У вас будет прозрачная таблица, в которой вы сможете увидеть ваш -body bg img/color-, и все, что вы помещаете в таблицу, не будет подвержено прозрачности.

С помощью CSS вы устанавливаете opacity в значение от 0 до 1. Однако это сделает любой элемент внутри вашей таблицы прозрачным.

Лучшее решение (к сожалению) заключается в том, чтобы сделать piling background png с небольшой прозрачностью. Таким образом, вы можете угаснуть фон без искажения содержимого.

How do you make a HTML table partially transparent?

How can I make it partially transparent? Is there a way of doing it without CSS? If not what is the CSS way?

5 Answers 5

You can try this in your html file:

And this in your css file:

This sets the rgba RED GREEN BLUE ALPHA values, 255,255,255 = white, 0,0,0 = black, and the 0.5 value at the end (ALPHA) is between 0 and 1, where 1 is opaque and 0 is transparent. I hope this helps.

In your case, #151515 (HEX CODE) translates to (21, 21, 21, 0.5) (RGBA) where A is equal to 50% transparent.

You can set the opacity or transparency of the background in CSS, as follows

The above makes it 60% clear. Hope this helps.

With CSS you set the opacity to a value between 0 and 1. However, that will make any element inside your table transparent.

A better solution (unfortunately) is to make a tiling background png with slight transparency. That way you can fade the background without fading the content.

Replying to old post but this is still relevant as I just referenced it =)

Too. you can use fireworks or (presumably) photoshop to create an all black .png image (just a black box). Set your desired transparency with the toolbar and set said photo as your table background image. It defaults to repeat itself so will fill your table. You will have a transparent table that you can see your -body bg img/color- through and anything you put into the table will be unaffected by the transparency.

The way to change the background color and opacity is adding this attribute to your css.

background-color: rgba(100,200, 0, 0.5); (not background)

If you want to change the background+text content opacity, you can use:

The Overflow Blog

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Как оформить полупрозрачную таблицу, сохранив нормальный фон для части ячеек

Еще один очень интересный прием оформления таблицы — настройка прозрачности ее ячеек. С выходом последней спецификации CSS3 это стало возможным реализовывать с помощью свойства opacity, в котором в форме десятичной дроби указывается степень прозрачности объекта. К примеру, 0 установить абсолютный просвет объекта, а 1 сделает его полностью не прозрачным. Также стоит отметить, что допускается пренебречь нулем в начале значения. Разделителем дроби обязательно должна выступать точка.

Все последние браузеры отлично отрабатывают функции этого свойства. Единственным и ожидаемым исключением является IE. Для него прозрачность устанавливается с помощью свойства filter. Форма указания значений для фильтра следующая: alpha(Opacity=X). Вместо Х нужно подставлять числа от 0 до 100. Принцип изменения прозрачности сохраняется: чем ниже значение, тем выше прозрачность.

Итак, переходим к прозрачности. Как уже было сказано, нужно воспользоваться свойством opacity. Только применить его нужно не к тегу table, а к td. В противном случае не получится сделать некоторые ячейки не прозрачными, так как дочерний элемент не может перекрыть оформление своего родителя. Поэтому создадим уникальные селекторы класса, для которых укажем небольшую прозрачность и полностью не прозрачный фон.

В результате чего получаем такую картину

полупрозрачность

Для справки

Важно помнить, что при использовании свойства filter код не пройдет проверку на валидацию.

Создать прозрачную таблицу HTML

введите описание изображения здесь

Как мне сохранить серый заголовок и сделать данные похожими?

6 ответов

Вот рабочий фрагмент.

border-spacing удаляет расстояние между ячейками
tr: первый в своем роде тип цели только для первой строки, чтобы применить цвет фона
td:nth-child(odd) предназначается только для первого столбца, чтобы сделать все поля жирными

Вы должны, конечно, использовать CSS:

Вам нужно избавиться от расстояния по умолчанию в таблице:

Вам нужно установить цвет фона элемента заголовка таблицы:

Вам нужно определить размеры ваших ячеек:

Вы можете стилизовать заголовок таблицы с помощью CSS

Изменить: чтобы избежать пробелов в заголовке добавить

Вы просто устанавливаете цвет фона на элементы, на которых он должен отображаться.

В этом нет ничего сложного.

Применяйте только серый цвет к атрибуту th! Также используйте таблицу < border-collapse:collapse;>для удаления любых пробелов между строк.