Erzwingen Sie das Innere td nicht wie tr

Ich habe eine tr mit opacity: 0.1, die td innerhalb davon wird natürlich respektieren diese opacity und wird transparent sein. Ich wollte wissen, ob es eine Möglichkeit gibt, die td zu zwingen, nicht den Stil von tr zu respektieren und opacity: 1.0 zu haben.Erzwingen Sie das Innere td nicht wie tr

tr { 
 
    background: #e56a54; 
 
    width: 100px; 
 
    opacity: 0.1; 
 
} 
 
td { 
 
    opacity: 1.0; 
 
    font-size: 40px; 
 
    color: green; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     reshad 
 
    </td> 
 
    </tr> 
 
</table>

jsFiddle

Quelle

2016-09-08 reshad

Nein, das 'td' ist ein Kind des' tr', das Ändern der Deckkraft der Zeile wirkt sich auch auf die Zelle aus. – LinkinTED

Ich denke, der beste Weg, Opazität dem Hintergrund der TR anzuwenden ist und das TD zu verlassen.

Von W3schools:

Wenn die Opazität Eigenschaft mit Transparenz eines Elements in den Hintergrund hinzufügen, alle untergeordneten Elemente werden ebenso transparent. Dies kann den Text innerhalb eines vollständig transparenten Elements hart lesen lassen. Wenn Sie die Deckkraft nicht auf untergeordnete Elemente anwenden möchten, verwenden Sie stattdessen RGBA Farbwerte (siehe "Weitere Beispiele" unten). http://www.w3schools.com/cssref/css3_pr_opacity.asp

tr { 
 
    background: rgba(229, 106, 84, 0.1); 
 
    width: 100px; 
 
} 
 
td { 
 
    font-size: 40px; 
 
    color: green; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     reshad 
 
    </td> 
 
    </tr> 
 
</table>

Quelle

2016-09-08 14:38:13

Ich möchte rgba nicht verwenden. Funktioniert diese Lösung auch mit Hex-Code? – reshad

@reshad Nein, aber es gibt Tonnen von Hex zu RGB-Konvertern. Finden Sie einen in Google, wie ich gerade Ihren Hex-Code übersetzt habe. CSS-Präprozessoren haben Funktionen, die können, aber ich denke nicht, dass Sie sie nur dafür verwenden sollten. –

Warum benutzen Sie nicht rgba? @reshad .... Sie können die Werte in 1 Sekunde, mit Chrome-Entwickler-Tools oder Illustrator oder einer der tausend Webseiten zu konvertieren. – DaniP

Nr td ist ein Kind der tr also, wenn tr transparent ist, so wird der gesamte Inhalt sein. (Es gibt offensichtlich keine Eigenschaft wie opacity: 2, um anfängliche Opazität des Kindes zu überwinden).

Sie wollen den Hintergrund transparent machen, oder transparentes Overlay verwenden, um mit position: absolute; z-index: 1 dass alle Inhalte von tr bleiben über, und fügen Sie z-index: 2-td.

Quelle

2016-09-08 14:39:36 Senthe

Erzwingen Sie das Innere td nicht wie tr

Antwort

Verwandte Themen