Fügen Sie einen transparenten Rahmen mit CSS hinzu
- Machen Sie einen CSS-Rahmen transparent
- Fügen Sie einem UI-Element einen transparenten Rahmen hinzu
- Fügen Sie einer Tabelle einen transparenten Rahmen hinzu
- Fügen Sie einem Bild einen transparenten Rahmen hinzu
- Abschluss
Ein transparenter Rand ist eine unsichtbare Grenze zwischen zwei Elementen auf einer Seite, die dadurch entsteht, dass die Eigenschaft border auf transparent gesetzt wird. Transparente Ränder erzeugen oft überlappende Effekte oder Zwischenräume zwischen Elementen ohne einen tatsächlichen Rand.
Machen Sie einen CSS-Rahmen transparent
Es gibt mehrere Möglichkeiten, einen CSS-Rahmen transparent zu machen. Eine Methode besteht darin, die CSS3-Eigenschaft für die Deckkraft zu verwenden und sie auf einen Wert kleiner als 1 zu setzen, um das gesamte Element einschließlich seines Rahmens transparent zu machen.
Eine andere Möglichkeit ist die Verwendung des RGBA-Farbmodells, mit dem Sie die Deckkraft für jeden roten, grünen und blauen Farbkanal angeben können. Sie können auch die hexadezimale Alphakanalnotation verwenden, um die Deckkraft des Rahmens festzulegen.
Ein transparenter Rahmen kann mit einer border-image-Eigenschaft mit einem URL-Wert erstellt werden, der auf ein transparentes Bild zeigt. Das Bild kann in einem beliebigen Bildbearbeitungsprogramm erstellt werden und sollte als png-Datei mit transparentem Hintergrund gespeichert werden.
Sobald der URL-Wert zur Eigenschaft border-image hinzugefügt wurde, ist der Rahmen transparent.
Fügen Sie einem UI-Element einen transparenten Rahmen hinzu
Das Hinzufügen eines transparenten Rahmens zu einem UI-Element ist eine einfache Möglichkeit, es vom Rest des Bildschirms abzuheben. Dazu müssen Sie die CSS-Eigenschaft border verwenden und auf transparent setzen.
Wenn Sie beispielsweise eine Schaltfläche haben, die einen transparenten Rahmen haben soll, würden Sie ihr das folgende CSS hinzufügen:
button {
border: transparent;
}
Sobald Sie dies getan haben, hat die Schaltfläche einen transparenten Rand, durch den der Hintergrund durchscheinen kann. Dies kann eine hervorragende Möglichkeit sein, Ihrer Benutzeroberfläche visuelles Interesse zu verleihen, ohne sie zu überlasten.
Beispielcode:
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Create a Transparent button
using HTML and CSS
</title>
<style>
body {
margin: 0;
padding: 0;
text-align: center;
}
h1 {
color: green;
}
/* Styling the button */
.btn {
cursor: pointer;
border: 1px solid #3498db;
background-color: transparent;
height: 50px;
width: 200px;
color: #3498db;
font-size: 1.5em;
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<h1>Transparent button</h1>
<h3>
Create a Transparent button
using HTML and CSS
</h3>
<button class="btn">Click me!</button>
</body>
</html>
Fügen Sie einer Tabelle einen transparenten Rahmen hinzu
Es gibt verschiedene Möglichkeiten, einer Tabelle einen transparenten Rahmen hinzuzufügen, und eine Möglichkeit besteht darin, die CSS-Eigenschaft border zu verwenden. Sie können den border-style auf solid und die border-color auf transparent setzen, um einen soliden, aber transparenten Rand zu erstellen.
Eine andere Möglichkeit, einen transparenten Rahmen zu erstellen, ist die Verwendung des HTML-Attributs border. Um einen vollständig transparenten Rand zu erstellen, können Sie das Attribut border auf 0 oder none setzen.
Schließlich können Sie ein Bild mit transparentem Hintergrund verwenden, um einen Rahmen zu erstellen.
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<style>
html
background-color: #ff9
color: white
table
border-collapse: separate
border-spacing: 1em
td
background-image: url('/img/DelftStack/logo.png')
background-position: auto auto
background-attachment: fixed
background-clip: padding-box
padding: 2em
color: #fff
</style>
</head>
<body>
<h2>Transparent border of table</h2>
<table>
<tr>
<td>qwe 1</td>
<td>qwe 1</td>
<td>qwe 1</td>
</tr>
<tr>
<td>asd 2</td>
<td>asd 2</td>
<td>asd 2</td>
</tr>
<tr>
<td>zxc 3</td>
<td>zxc 3</td>
<td>zxc 3</td>
</tr>
</table>
</body>
</html>
Fügen Sie einem Bild einen transparenten Rahmen hinzu
Sie können einem Bild auf verschiedene Weise einen transparenten Rahmen hinzufügen. Eine Möglichkeit, einen transparenten Rahmen hinzuzufügen, ist die Verwendung von CSS.
Sie können einen Bildrand mit der CSS-Eigenschaft border hinzufügen. Sie können den Stil, die Farbe und die Breite des Rahmens transparent einstellen, indem Sie den Wert transparent für die Eigenschaft color verwenden.
Eine weitere Möglichkeit, einem Bild einen transparenten Rahmen hinzuzufügen, besteht darin, das HTML-Attribut border zu verwenden, um einem Bild einen Rahmen hinzuzufügen.
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<title>Transparent border</title>
<style>
.image {
width: 200px;
height: 200px;
padding: 55px;
border-radius: 300px; /* for getting circle shape */
border: double 15px rgba(254, 254, 254, 0.7);
background: rgba(254, 254, 254, 0.7);
}
body {
background: url("/img/DelftStack/logo.png");
height: 100%;
}
</style>
</head>
<body>
<font color="brown"><h2>Transparent Image Circle</h2></font>
<div class="image">
Transparent done by rgba
</div>
</body>
</html>
Abschluss
In diesem Artikel können Sie also die Codes für transparente Ränder überprüfen. Sie können den Code für den transparenten Rahmen von Schaltflächen aus dem Abschnitt abrufen, in dem wir einem UI-Element einen transparenten Rahmen hinzugefügt haben.
Sie können auch den anderen Code für den transparenten Rahmen von Bildern und Tabellen überprüfen.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn