webentwicklung-frage-antwort-db.com.de

So machen Sie den Hintergrund der Tabellenzelle transparent

Ich erstelle eine Tabelle in einer Tabelle für meine Seite "Alle Benutzer". Die erste Tabelle bestand aus zwei Teilen - den Anzeigen und den Nutzern -. In der "Benutzer" -Tabelle unter <tr><td>...</td></tr> habe ich eine weitere Tabelle erstellt, in der die Daten jedes Benutzers über PHP angezeigt werden.

Hier ist das Bild: http://postimg.org/image/3mbeyb411/

Wie Sie im Bild sehen können, enthielt die rechte Seite der übergeordneten Tabelle (die größer als die linke ist) die Tabelle "Benutzer", in der ihre Profilbilder angezeigt wurden, was gut ist.
Jetzt habe ich diesen schönen verschwommenen Hintergrund auf meine Seite gesetzt hintergrund der weißen Zelle der übergeordneten Tabelle blockiert es.

Wie kann ich den weißen Hintergrund transparent machen? Ich habe versucht, den background:transparent; zu machen, aber ohne Erfolg.

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

     </td>

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

Und für CSS

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

Bitte ich brauche wirklich deine Hilfe. Ich google das schon seit Tagen und fand immer noch keine einzige Antwort

AKTUALISIEREN

Nach was ich gesucht habe, ist so etwas <td style="background:transparent;">, aber ich habe es im Internet nicht gefunden. Oder ist es sogar möglich, den Tisch und den Hintergrund der Zelle transparent zu machen?

6
Emo-Punk

Ein transparenter Hintergrund hilft Ihnen zu erkennen, was sich hinter dem Element befindet. In diesem Fall ist das, was sich hinter Ihrer td befindet, tatsächlich die übergeordnete Tabelle. Wir haben also keine Möglichkeit, mit reinem CSS das zu erreichen, was Sie möchten. Selbst wenn Sie ein Skript verwenden, können Sie es nicht direkt lösen. Es gibt nur eine Problemumgehung, indem ein Skript verwendet wird, das auf der Idee basiert, denselben Hintergrund sowohl für den Körper als auch für das _ td zu verwenden. Der background-position muss jedoch entsprechend aktualisiert werden, wenn die Größe des Fensters geändert wird. Hier ist der Code, den Sie mit der Standardhintergrundposition von body verwenden können (was left top ist, andernfalls müssen Sie den Code ändern, um den background-position des td korrekt zu aktualisieren):

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 (besser 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);

Demo.

Ändern Sie die Größe des Ansichtsfensters. Sie sehen, dass background-position korrekt aktualisiert wurde. Dadurch wird der Effekt so aussehen, als sei der Hintergrund von td transparent für den Körper.

3
King King

Sie können die Transparenz mithilfe des Stils direkt im table-Tag einstellen:

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

Die letzte Ziffer der Funktion rgba dient der Transparenz. 1 bedeutet 100% undurchsichtig, während 0 für 100% transparent steht.

10
Catalin Marcu

Was ist das? :)

background-color: #D8F0DA;

Versuchen 

 background: none

Und überschreiben funktioniert nur, wenn die Eigenschaft genau gleich ist.

hintergrund überschreibt Hintergrundfarbe nicht.

Wenn Sie Alphatransparenz wünschen, verwenden Sie so etwas

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

Es ist möglich  
Sie müssen auch nur die Farbe auf das Element "tbody" anwenden, da dies der Tischkörper ist, der unsere Probleme verursacht, wenn Sie unter ihn hineinschauen.
table, tbody, tr, th, td{ background-color: rgba(0, 0, 0, 0.0) !important; }

1
MajklCan

Sie geben dem Hintergrund Farbe und erwarten dann, dass er transparent ist. Entfernen Sie background-color: #D8F0DA

Wenn # D8F0DA die Textfarbe sein soll, verwenden Sie color: #D8F0DA

0
Maxzeroedge

Ich verwende das "transparent" - Schlüsselwort und es funktioniert perfekt!

<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

Sie können die CSS-Eigenschaft "background-color: transparent;" oder apha für die Rgba-Farbdarstellung verwenden. Beispiel: "Hintergrundfarbe: rgba (216,240,218,0);"

Der Apha ist der letzte Wert. Es ist eine Dezimalzahl, die von 0 (völlig transparent) bis 1 (vollständig sichtbar) geht.

0
Samuel Freitas