CSS transparente Grenze
In diesem Artikel werden wir eine transparente Grenze in CSS erstellen und Sie werden sehen, dass das Objekt hinter der transparenten Grenze sichtbar ist. Wir werden die verschiedenen Beispiele hier untersuchen, um Ihnen ein vollständiges Verständnis des transparenten Grenzkonzepts zu vermitteln.
Beispiel 1:
Öffnen Sie eine neue Datei im Visual Studio -Code. Wenn diese leere Datei geöffnet wird, wählen Sie die Sprache aus. Hier erstellen wir einen HTML -Code, also wählen wir die HTML -Sprache aus. Wenn wir diese Sprache auswählen, ist die hier erstellte Datei die HTML -Datei. Wenn wir diese Datei also speichern, müssen wir die Dateierweiterung nicht erwähnen. Geben Sie danach die grundlegenden HTML -Tags ein oder setzen Sie “!"Und dann drücken Sie" ENTER ". Sie erhalten automatisch alle grundlegenden Tags, die für die HTML erforderlich sind.
Jetzt verknüpfen wir diese Datei mit der CSS -Datei, die „transparent ist.CSS ”. Im Körper verwenden wir zuerst das Überschriften -Tag, um die Überschrift zu erzeugen. Danach erstellen wir zwei Divs mit den Namen „inner“ und „äußerlich“. Dann stellen wir wieder eine Überschrift, die im zweiten Div erscheint. Jetzt schließen wir diese Divs hier. Wir erstellen hier eine transparente Grenze, indem wir das Grundstück „Grenze“ in CSS verwenden und die RGBA -Farbe in dieser Grenzeigenschaft festlegen.
Wir wenden die „kastanienbraune“ Farbe auf die von uns zuvor erstellten Überschriften an. Das „äußere“ dient zur Erwähnung der ersten Div -Klasse und wir setzen ihre „Breite“ auf „300px“. Die „Höhe“ dieses ersten Divs beträgt „300px“ und die „Marge“ hier ist „10%“. Nach all diesen Eigenschaften setzen wir die Eigenschaft "Grenze" und setzen ihren Wert auf den RGBA -Wert. Wir haben hier auch den Alpha -Wert festgelegt, um die Grenze transparent zu machen. Wir setzen den „Grenze“ auf „10px“ „Breite“ und in „soliden“ Typ. Die RGBA, die wir hier festlegen, lautet „RGBA (0, 0, 0), .4) "wobei" RGB (0, 0, 0) "für Schwarz verwendet wird. Aber hier fügen wir einen Transparenzwert hinzu, der „0 ist.4 ”. Der "Grenzradius" ist auf "5px" eingestellt, sodass die Ränder der Grenze etwas gekrümmt sind.
Jetzt erwähnen wir auch den zweiten Div -Namen hier als "äußerlich". Und wir verwenden hier einige Eigenschaften für diese zweite DIV. Wir müssen die Größe dieses zweiten Divs kleiner als die erste DIV einstellen. Also setzen wir für jeden von ihnen seine „Breite“ und „Höhe“ auf „270px“. Sein "Rand" ist "automatisch" und der "Margen-Top" ist "3%". Wir setzen den „Hintergrund“ als „RGBA (0, 0, 0, 0).4) ”, genauso wie die Grenze des ersten Divs. Der „Border-Radius“ hier ist auch "5px" und die "Polsterung", die wir verwenden, ist auch "5px".
Hier können Sie sehen, dass die Grenze transparent ist, da wir einige Alpha -Werte im RGBA -Wert der Grenze anwenden. Wenn wir ein Objekt hinter dieser Grenze legen, wird es uns sichtbar sein.
Beispiel #2:
Dies ist unser zweites Beispiel und wir erstellen nach der Überschrift einen leeren Div -Behälter. Wir setzen das Bild in diesem Div und wenden einen transparenten Rand auf das Bild an, indem wir die CSS -Eigenschaften verwenden.
Wir setzen die "Farbe" auf "H1" als "Maroon". Wir verwenden den „Div“ -Container hier und setzen seine „Breite“ auf „300px“ und seine „Höhe“ auf „300px“. Wir verwenden auch den „Float“ hier, um diese Div zu „links“ zu schweben. Wir setzen den „Hintergrund“ dieses Divs und setzen die „MyPicture.png ”als Hintergrund dieses Divs. Wir legen den Weg dieses Bildes in die „URL“ und setzen diese „URL“ als Wert der Eigenschaft „Hintergrund“. Wir verwenden die Eigenschaft "Margin" und setzen sie auf "20px". Die "Polsterung" ist ebenfalls auf "20px" eingestellt. Für den „Grenze“ verwenden wir den Wert "Breite" auf "25px" des "soliden" Typs. Da wir einen transparenten Rand erstellen wollen, müssen wir hier die „RGBA“ -Parfe verwenden, in der wir den Alpha -Wert einsetzen, um einen transparenten Rand zu erstellen. Der RGBA -Farbwert lautet „RGBA (143, 9, 9, 0).5) ”. Die ersten drei Werte zeigen die rote Farbe, aber hier, 0.5 wirkt sich auf diese Grenze einiger Transparenzeffekte an. Für die gesamte "Körper" setzen wir den Immobilienwert "Polster" auf "90px".
Die Ausgabe hier enthält ein Bild. Sie könnten den Rand um dieses Bild bemerken. Dieser Grenze ist transparent, da wir das Bild hinter der Grenze sehen können. In den Ecken des Bildes können wir sehen, dass die Farbe des Bildes verblasst, weil wir einen transparenten Rand um das Bild haben.
Beispiel #3:
In diesem HTML erstellen wir wieder nur einen Div. Mit den CSS -Attributen legen wir nun das Bild in dieses Div ein und wenden einen transparenten Rand darauf an.
Zunächst müssen wir den Namen des Div -Containers, den wir in den HTML -Code festlegen. Dann setzen wir die lockigen Zahnspangen. In diesen lockigen Zahnspangen platzieren wir den „Hintergrund“, der den Hintergrund dieses Divs festlegt. Wir setzen das Bild in der „URL“ und diese „URL“ ist hier der Wert der Eigenschaft „Hintergrund“ von CSS. Wir nutzen die „Grenze“ und erhöhen die „Breite“ dieser Grenze in diesem Beispiel. Wir setzen seine „Breite“ auf „50px“ und diese Grenze befindet sich in „soliden“ Form. Wir verwenden hier die „RGBA“, die wir in unserem vorherigen Beispiel besprochen haben. Wir setzen den Wert von Alpha als „0).5 ”, was die Transparenz dieser Grenzfarbe darstellt. Die "Größe" dieser "Div".Wrap ”ist" 300px "und die" Breite "" 500px ", es erscheint also rechteckig. Der „Rand“, den wir hier eingestellt haben, ist "50px".
Schauen Sie sich die folgende Ausgabe an und beachten Sie die Grenze. Hier können Sie sehen, dass der Bildteil, der hinter der Grenze vorhanden ist, für uns sichtbar ist. Es bedeutet, dass diese Grenze transparent ist. Wir können diesen transparenten Rand erstellen, indem wir den Alpha -Wert in der Grenze mit der RGBA -Farbe festlegen.
Abschluss
Dieser Artikel wird hier vorgestellt, um Ihnen dabei zu helfen, die CSS -Eigenschaften zu erfassen, die es uns ermöglichen. Dieses Tutorial hat dieses Thema gründlich durchlaufen. Wir haben die drei unterschiedlichen Beispiele hier gezeigt, an denen wir die transparente Grenze mithilfe der Grenzeigenschaft entworfen haben. Wir haben auch die RGBA -Werte in dieser Grenzeigenschaft verwendet, die die Möglichkeit bildeten, die Alpha -Werte festzulegen, um unsere Grenze transparent zu machen. Wir haben auch diese „transparente Grenze“ definiert, da sie die Grenze ist, aus der wir das Objekt dahinter gesehen haben. In diesem Artikel haben wir die Ergebnisse all dieser Codes aufgenommen und sie hier genauso erläutert. Ich hoffe, Sie können diese „transparente Grenze“ in Ihren Projekten erstellen, nachdem Sie diesen Artikel aufmerksam befolgt.