Wie kann ich ein großes Kreuz über ein ganzes (div) Element setzen?
Ich habe eine Seite mit den Details einer Person - Name, Geburtsdatum, Adresse, usw. - und wenn die Person verstorben ist, möchte ich immer noch die Kontaktdaten (Adresse, Telefonnummer, etc.) anzeigen, möchte sie aber einfügen ein großes Kreuz durch alles, um zu zeigen, dass es nicht verwendet werden sollte.
Ich konnte nur wirklich daran denken, ein Bild zu verwenden, aber da das Element in Länge und Breite variieren kann, bin ich mir nicht sicher, wie das überhaupt funktionieren würde.
Fügen Sie ein absolut positioniertes div (100% Höhe / Breite) hinzu, das eine Schrift mit der Größe em enthält, und füllen Sie es mit einem "X"
%Vor%Wird richtig expandieren (und auch einen Bild-Callback speichern :))
Wenn Sie nicht möchten, dass das X abgeschnitten wird, indem Sie seine Größe sehr groß einstellen, benötigen Sie Javascript, um die Größe zu ändern, wenn sich die div-Größe ändert.
Noch besser, Sie können es mit :after pseudoklasse hinzufügen und sowohl das extra div als auch das "X"
Oder :before .. wird es "unter" den vorhandenen Inhalt
AKTUALISIEREN
Ich habe einen Weg gefunden, CSS nur zu benutzen ...
%Vor%UPDATE 2
Und eine Inline-Svg, die einen Text enthält, skaliert den Text auf die Größe des Div ...
%Vor% Sie könnten class für Ihr Box-Element verwenden.
Fügen Sie dann über dieses class Ihr Kreuz als Hintergrund oder ein Pseudoelement hinzu, indem Sie background-size oder width/height für das Pseudoelement und die absolute Positionierung darüber verwenden.
Wie auch immer, die Verwendung einer Klasse wird Ihnen helfen, einen bestimmten Stil für diese Box zu erstellen, es könnte sogar angezeigt werden: none oder opacity:0.5; pointer-events:none; , oder was auch immer Sie für richtig und kohärent mit Bedeutung und Website-Design halten .
CSS ist nicht wirklich für solche Dinge gedacht - der Zweck eines div-Elements besteht darin, den HTML-Code in Abschnitte aufzuteilen, so dass Sie Formatierungen (CSS) auf Elemente innerhalb der div-Tags anwenden können. Sie könnten versuchen, den Text so zu formatieren, dass er durchgestrichen wird.
%Vor%Es ist immer noch lesbar, aber offensichtlich nicht mehr vorhanden.
Tags und Links css