Können Sie in CSS eine Rahmenopazität festlegen?

409

Gibt es eine einfache CSS-Methode, um den Rand eines Elements mit so etwas halbtransparent zu machen?

border-opacity: 0.7;

Wenn nicht, hat jemand eine Idee, wie ich dies ohne Verwendung von Bildern tun könnte?

mcbeav
quelle

Antworten:

626

Leider opacitymacht das Element das gesamte Element (einschließlich aller Texte) halbtransparent. Der beste Weg, um den Rand halbtransparent zu machen, ist das rgba-Farbformat. Dies würde beispielsweise einen roten Rand mit einer Deckkraft von 50% ergeben:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

Das Problem bei diesem Ansatz ist, dass einige Browser das rgbaFormat nicht verstehen und überhaupt keinen Rand anzeigen, wenn dies die gesamte Deklaration ist. Die Lösung besteht darin, zwei Grenzerklärungen abzugeben. Die erste mit einer falschen Deckkraft und die zweite mit der tatsächlichen. Wenn ein Browser in der Lage ist, verwendet er den zweiten, wenn nicht, den ersten.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

Die erste Randdeklaration entspricht der Farbe eines zu 50% undurchsichtigen roten Randes über einem weißen Hintergrund (obwohl Grafiken unter dem Rand nicht durchbluten).

UPDATE: Ich habe "background-clip: padding-box" hinzugefügt. auf diese Antwort (gemäß dem Vorschlag von SooDesuNe in den Kommentaren), um sicherzustellen, dass der Rand auch dann transparent bleibt, wenn eine feste Hintergrundfarbe angewendet wird.

Kingjeffrey
quelle
Ja, und dann sind wir wieder bei dem Problem, das er zuerst hatte ^^ "Ich habe darüber nachgedacht, rgba für die Rahmenfarbe zu verwenden, aber es funktioniert in modernen Browsern sehr schlecht." während meine Lösungen in so ziemlich allen Browsern funktionieren
Breezer
23
Tatsächlich funktioniert rgba in modernen Browsern hervorragend (es sei denn, Sie halten IE6-8 für "modern").
Kingjeffrey
4
Nun, sie sollen sein: P und wenn du 50% + hast, solltest du dafür sorgen, dass es für dh auch imo funktioniert, zumindest für ie7 +
Breezer
42
Und deshalb gibt es die "falsche Deckkraft", die zurückfällt. Mein Leben als Webdesigner wurde viel einfacher, als ich akzeptierte, dass nicht jeder Browser identisch rendern muss. Wenn sie unterstützen border-radius, erhalten sie abgerundete Ecken. Wenn nicht, tun sie es nicht. Der Inhalt ist immer noch zugänglich, es sieht immer noch gut aus, es sieht einfach besser aus, wenn sie einen fähigen Browser verwenden. Ich habe in den letzten 1,5 Jahren noch nie einen Kunden dazu gebracht, sich bei jedem Projekt so zu verhalten.
Kingjeffrey
23
Wenn Sie jedoch versuchen, den Inhalt hinter Ihrem umrandeten Inhalt zum Leuchten zu bringen (und NICHT die Hintergrundfarbe des umrandeten Elements selbst), müssen Sie auch festlegen background-clip:padding-box;.
SooDesuNe
134

Verwenden Sie einfach einen festen Schatten mit einem Versatz von 0:

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

Wenn Sie dem Element einen Rahmenradius festlegen, erhalten Sie außerdem ziemlich abgerundete Ränder

jsFiddle Demo

Geben Sie hier die Bildbeschreibung ein

Pedro L.
quelle
Das wird immer funktionieren. Vielen Dank für das Snippet :) Für alle, die nur einen Rand zu einer oder mehreren Sites haben möchten, müssen Sie die beiden ersten Parameter wie diesen Box-Schatten ändern: -1px -1px 0px 0px rgba (0,0,0,0,1) ) um zB Border-Top zu erreichen
Thomas Richter
Dieser sollte mit Vorsicht verwendet werden! box-shadowhat keine Größe und kann Ihr Layout beschädigen, wodurch Ihre Ränder ungleichmäßig werden! jsfiddle.net/bj81hew7/2
William
14

Wie andere bereits erwähnt haben: Laut CSS-3 können Sie mithilfe der rgba(...)Syntax eine Rahmenfarbe mit einem Deckkraftwert (Alpha) angeben.

Hier ist ein kurzes Beispiel, wenn Sie es überprüfen möchten.

  • Es funktioniert in Safari und Chrome (funktioniert wahrscheinlich in allen Webkit-Browsern).

  • Es funktioniert in Firefox

  • Ich bezweifle, dass es überhaupt im IE funktioniert, aber ich vermute, dass es einen Filter oder ein Verhalten gibt, das es funktionieren lässt.

Es gibt auch diesen Stapelüberlauf-Beitrag , der einige andere Probleme vorschlägt - nämlich, dass der Rand über jeder von Ihnen angegebenen Hintergrundfarbe (oder jedem Hintergrundbild) gerendert wird. Dies schränkt in vielen Fällen die Nützlichkeit von Border Alpha ein.

Lee
quelle
4
Das Grenzproblem kann mit background-clip: padding-box;behoben werden (und bis dies unterstützt wird, können Sie die Herstellererweiterungen -webkit und -moz verwenden).
Kingjeffrey
Ich habe diese Antwort zu der Frage hinzugefügt, mit der Sie verlinkt haben.
Kingjeffrey
6

Wenn Sie Ihre CSS-Codierung mit dem W3C-Validator überprüfen, werden Sie feststellen, ob Ihr CSS-Code akzeptabel ist, auch wenn er in den gängigen Browsern funktioniert hat.

Erstellen eines transparenten Rahmens über CSS, wie oben beschrieben,

border: 1px solid rgba(255, 0, 0, .5);

wird von W3C-Standards nicht akzeptiert, auch nicht für CSS3. Ich habe den Direct Input Validator mit dem folgenden CSS-Code verwendet:

.test { border: 1px solid rgba(255, 0, 0, .5); }

Die Ergebnisse waren:

Wertefehler: Rahmen Zu viele Werte oder Werte werden nicht erkannt: 1px solid rgba (255,0,0,0,5)

Leider wird der Alpha-Wert (der Buchstabe "a" am Ende von "rgb") von W3C noch nicht als Teil der Randfarbwerte akzeptiert. Ich frage mich, warum es nicht standardisiert ist, da es in allen Browsern funktioniert. Das einzige Problem ist, ob Sie sich an W3C-Standards halten oder davon Abstand nehmen möchten, um etwas in CSS zu erstellen.

So verwenden Sie den W3C Online-CSS-Validator / Direct Input .

Es ist immer eine gute Idee, einen Validator zu verwenden, um Ihre Arbeit zu überprüfen. Es hilft wirklich, kleine oder sogar große Fehler beim Codieren zu finden, wenn Sie nach stundenlanger Codierungsarbeit die Augen verschränken.

Mark2090
quelle
11
Falsch, dies ist nach W3C-Standards vollkommen akzeptabel und ein Fehler im Validator. Siehe diese Antwort . Es ist eine gute Idee, den Validator zu verwenden, aber vertrauen Sie ihm nicht für alles.
BoltClock
5

* Soweit ich weiß, gibt es unter solchen Umständen nicht das, was ich normalerweise mache. Erstellen Sie einen Block darunter mit einer größeren Größe ((Rahmengröße * 2) + Originalgröße) und machen Sie ihn transparent

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

Hier ist ein Beispiel

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

Aktualisieren:

Diese Antwort ist veraltet, da diese Frage immerhin mehr als 8 Jahre alt ist. Heute unterstützen alle aktuellen Browser RGBA, Box Shadows und so weiter. Aber dies ist ein anständiges Beispiel dafür, wie es vor mehr als 8 Jahren war.

Breezer
quelle
Ja, das ist es, was ich letztendlich getan habe. Es ist einfach scheiße, mit der Positionierung der Elemente zu fummeln.
McBeav
fügte ein Beispiel hinzu, damit Sie klarer sehen konnten, wie ich dachte :)
Breezer
Dies ist möglich - jedoch nicht mit umfassender browserübergreifender Unterstützung. Die Chancen stehen jedoch gut, dass jeder Browser, der CSS-Deckkraft für Hintergrundfarben unterstützt, auch Rahmenfarben unterstützt rgba(...). Sie können es hier ausprobieren .
Lee
@Lee, IE unterstützt die "Filter" -Opazität, jedoch keine Form von rgba (bis IE9).
Kingjeffrey
2

Als alternative Lösung, die in einigen Fällen funktionieren kann : Ändern Sie die border-stylein dotted.

Das Abwechseln von Pixelgruppen zwischen der Vordergrundfarbe und der Hintergrundfarbe entspricht nicht einer durchgehenden Linie von teilweise transparenten Pixeln. Auf der anderen Seite erfordert dies deutlich weniger CSS und ist für jeden Browser ohne browserspezifische Anweisungen viel kompatibler.

Stephan Samuel
quelle
0

Andere Antworten befassen sich mit dem technischen Aspekt des Problems der Grenzopazität, während ich einen Hack vorstellen möchte (nur reines CSS und HTML). Erstellen Sie im Grunde ein Container-Div mit einem Border-Div und dann dem Content-Div.

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

Und dann das CSS: (Setzen Sie den Inhaltsrand auf "Keine" und achten Sie darauf, dass die Randdicke berücksichtigt wird.)

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}
RBk
quelle
-1

Versuche dies:

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

Und hier kommt unser magisches CSS.

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

Schauen Sie sich die Demo hier an.

Ein Malik
quelle