Wie kann ich ein transparentes Div erstellen, das eine nicht transparente Grenze hat?

Ich habe ein weißes div erstellt und ihm eine Opazität von 0,4 gegeben und dann habe ich ihm einen schwarzen Rand gegeben. Da ich das div aber transparent gemacht habe, war die Grenze auch transparent. Wie kann ich die Grenze nicht transparent machen, während das Div transparent bleibt?Wie kann ich ein transparentes Div erstellen, das eine nicht transparente Grenze hat?

CSS:

#box{ 
    background-color:white; 
    opacity:0.4; 
    width:600px; 
    height:200px; 
    border-radius:15px; 
    border: 5px solid black; 

}

Quelle

2017-05-20 Musty

Sie suchen [diese] (http://jsfiddle.net/nnt25251325/Dnfqm/1/)? – Nimish

machen nur Hintergrundfarbe teilweise transparent: Verwenden Sie rgba (255,255,255,0.4) und Drop-Opazität –

hinzufügen ein anderes div, das das aktuelle div enthält. Entfernen Sie die Eigenschaft border und die Eigenschaften width und height für die #box und fügen Sie sie hinzu, die andere enthält div. Stellen Sie sicher, dass das enthaltene div eine Klasse anstelle einer ID enthält. Ein Beispiel:

.entirebox { 
 
    width: 600px; 
 
    height: 200px; 
 
    border-radius: 15px; 
 
    border: 5px solid black; 
 
} 
 

 
#box { 
 
    background-color: white; 
 
    opacity: 0.4; 
 
}

<div class="entirebox"> 
 
    <div id="box"> 
 
    <p>The stuff that you originally had here</p> 
 
    </div> 
 
</div>

Hier habe ich das enthält, div und es entirebox benannt. Beachten Sie, dass das umschließende div eine Klasse hat, während das div, mit dem Sie begonnen haben, noch eine ID hat.

Hoffe das half.

Quelle

2017-05-20 21:08:30

danke für die Hilfe. das hat funktioniert. Aber jetzt, wo das funktionierte, stieß ich auf ein anderes Problem. Ich möchte Text in die Box hinzufügen, aber natürlich ist es auch transparent und wenn ich versuche, es zu den "ganzenBox" div es schob einfach die Box div down – Musty

@Musty in diesem Fall wird diese Methode nicht funktionieren. Behalte stattdessen einfach den CSS-Code, den du vorher hattest, '#box { background-color: white; Opazität: 0,4; Breite: 600px; Höhe: 200px; Randradius: 15px; Grenze: 5px solid schwarz; } 'und ändern Sie die Hintergrundfarbe in ein RGBA. Dann mach es (255, 255, 255, 0.4). –

vielen Dank für die Hilfe. eine letzte Sache. Diese beiden Divs (Box, ganze Box) sind beide innerhalb von div, das ist nur Text, aber der Text bleibt am Rand hängen. Gibt es eine Möglichkeit, eine Lücke zu schließen? – Musty

Sie können nicht Teil eines Elements einer Opazität und einen anderen Teil des gleichen Elements eine andere Opazität machen.

ist hier ein dummes Beispiel: https://jsfiddle.net/sheriffderek/85utzq4p/

Versuchen rgba mit() für die Hintergrundfarbe anstelle - oder das Element in etwas wickeln.

.box { 
    background: rgba(255, 0, 0, .5); 
}

Quelle

2017-05-20 20:55:55 sheriffderek

, wenn Sie etwas suchen, die sowohl mit festen farbigen Hintergründen und Bildhintergründen arbeiten können Sie einen anderen Elternteil erstellen und es auf diese Weise eingestellt:

body{ 
 
    margin: 0px; 
 
    } 
 

 
div.child { 
 
    display: block; 
 
    position: relative; 
 
    width: 200px; 
 
    height: 150px; 
 
    background: red; 
 
    opacity:0.3; 
 
} 
 

 
div.parent{ 
 
    display: inline-block; 
 
    position:relative; 
 
    border: 4px solid black; 
 
    top: 0px; 
 
    left: 0px; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    </div> 
 
</div>

Quelle

2017-05-20 21:08:10 vlk

Wie kann ich ein transparentes Div erstellen, das eine nicht transparente Grenze hat?

Antwort

Verwandte Themen