it-swarm.com.ru

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

Я создаю таблицу внутри таблицы для моей страницы "все пользователи". Первая таблица была разделена на две части - рекламу и пользователей. Внутри таблицы «users» в <tr><td>...</td></tr> я создал еще одну таблицу для каждого пользователя, которая будет отображаться через php.

Вот изображение: http://postimg.org/image/3mbeyb411/

Как вы можете видеть на изображении, правая сторона родительской таблицы (которая больше, чем левая) содержала таблицу «пользователи», в которой появились изображения их профилей, что хорошо.
Теперь я положил этот хороший размытый фон на мою страницу, но белый фон родительской таблицы блокирует это.

Как я могу сделать этот белый фон прозрачным? Я пытался сделать background:transparent;, но безрезультатно.

<table id = "MainTable">
  <tr>
    <td width = "20%">

     </td>

    <td width = "80%">
        <table.......>***php users appear code here***</table>
    </td>
 </tr>
</table>

И для CSS

#MainTable {
    width: 100%;
    background-color: #D8F0DA;
    border: 1px;
    min-width: 100%;
    position: relative;
    opacity: 0.97;
    background: transparent;
}

Пожалуйста, мне действительно нужна твоя помощь. Я гуглил это несколько дней и до сих пор не нашел ни одного ответа

Обновление

То, что я искал, это что-то вроде <td style="background:transparent;">, но все же я не нашел его в Интернете. Или вообще возможно сделать таблицу и фон ячейки прозрачными?

6
Emo-Punk

Прозрачный фон поможет вам увидеть, что находится за элементом, в этом случае то, что за вашей td на самом деле является родительской таблицей. Таким образом, у нас нет способа достичь того, что вы хотите, используя чистый CSS. Даже использование скрипта не может решить это напрямую. Мы можем просто обойти использование сценария, основанного на идее использования одного и того же фона как для тела, так и для td. Однако мы должны обновлять background-position соответственно всякий раз, когда окно изменяется. Вот код, который вы можете использовать с фоновой позицией по умолчанию body (то есть left top, в противном случае вам придется изменить код, чтобы корректно обновить background-positiontd):

HTML:

<table id = "MainTable">
 <tr> 
    <td width = "20%"></td>
    <td width = "80%" id='test'>
      <table>
        <tr><td>something interesting here</td></tr>
        <tr><td>another thing also interesting out there</td></tr>
      </table>
    </td>
 </tr>
</table>

CSS:

/* use the same background for the td #test and the body */
#test {
  padding:40px;
  background:url('http://placekitten.com/800/500');    
}
body {
  background:url('http://placekitten.com/800/500');
}    

JS (лучше использовать jQuery):

//code placed in onload event handler
function updateBackgroundPos(){
  var pos = $('#test').offset();
  $('#test').css('background-position', 
                            -pos.left + 'px' + " " + (-pos.top + 'px'));
};
updateBackgroundPos();
$(window).resize(updateBackgroundPos);

Демо.

Попробуйте изменить размер области просмотра, и вы увидите, что background-position обновлен правильно, и эффект будет выглядеть, как будто фон td прозрачен для тела.

3
King King

Вы можете сделать это, установив прозрачность через стиль прямо внутри тега таблицы:

<table id="Main table" style="background-color:rgba(0, 0, 0, 0);">

Последняя цифра в функции rgba предназначена для прозрачности. 1 означает 100% непрозрачность, а 0 означает 100% прозрачность.

10
Catalin Marcu

Что это? :)

background-color: #D8F0DA;

Пытаться 

 background: none

И переопределение работает, только если свойство точно такое же.

фон не переопределяет цвет фона.

Если вы хотите альфа-прозрачность, то используйте что-то вроде этого

background: rgba(100, 100, 100, 0.5);
3
R_G

Это возможно  
Вам также просто нужно применить цвет к элементу 'tbody', так как именно это тело таблицы вызывает нашу проблему, заглядывая снизу.
table, tbody, tr, th, td{ background-color: rgba(0, 0, 0, 0.0) !important; }

1
MajklCan

Вы задаете цвет фона, а затем ожидаете, что он будет прозрачным? Удалить background-color: #D8F0DA

Если вы хотите, чтобы # D8F0DA был цветом текста, используйте color: #D8F0DA

0
Maxzeroedge

Я использую "прозрачный" ключевое слово, и он отлично работает!

<style type="text/css">
#img table,tr, td {
    border: 1px solid transparent;
    align="center";
    border-spacing: 25px;
    border-collapse: collapse;
    border-width: 5px;
    padding: 5px;
    padding-left: 50px;
}
0
Reihan_amn

Вы можете использовать свойство CSS "background-color: transparent;" или использовать apha в представлении цветов rgba. Пример: "background-color: rgba (216,240,218,0)";

Афа является последним значением. Это десятичное число, которое идет от 0 (полностью прозрачный) до 1 (полностью видимый).

0
Samuel Freitas