Element Opazität aber nicht Grenze

Question

Nun, ich habe diese Frage und ich sehe, dass jemand schon etwas ähnliches gefragt, aber das verstehe ich noch nicht.

Was ich tun möchte, ist eine Deckkraft von 0,7 auf ein Element, sondern nur auf den Inhalt und nicht auf den Rahmen, ich möchte die Grenze in voller Farbe bleiben. Einiger Beispiel-Code hier:

input#element{ 
    width: 382px; 
    height: 26px; 
    border: 2px solid #FFF; 
    border-radius: 3px; 
    opacity: 0.8; 
} 

Das Ergebnis ist, dass mein Eingangselement die Opazität hat aber auch die Grenze, Kann jemand mir sagen, wie die Opazität setzen nur im Inhalt, aber nicht die Grenze?

Danke.

Answer 1

Verwenden rgba Syntax sowohl für Farbe und Hintergrund und nicht die Opazität für ganzes Element verwendet

demo dabblet

input { 
    width: 382px; 
    height: 26px; 
    border: 2px solid #FFF; 
    border-radius: 3px; 
    background: rgba(255, 255, 255, .8); 
    color: rgba(0, 0, 0, .8); 
} 

Answer 2

Sie background:rgba Eigenschaft für Ihr gewünschtes Ergebnis zu erzielen, könne dass nur bewirken Ihr parent nicht die child und auch für die border von parent.

CSS

input#element{ 
    width: 382px; 
    height: 26px; 
    border: 2px solid #000; 
    border-radius: 3px; 
    background:rgba(255,0,0,0.1); 
} 

DEMO

Answer 3

ich nicht sehen, dass die Frage nach einem Eingangselement war, aber vielleicht wird meine Antwort jemand anders helfen, hier so gehen wir.

Wie andere Poster gesagt haben, können Sie die rgba Syntax verwenden, um Ihre Hintergrundfarbe zu definieren.

Wenn es verschachtelte Elemente in die, die Sie ändern möchten, können Sie auch die opacity ihnen mit diesem CSS anwenden:

#element > * { 
    opacity:0.8; 
} 

Hier ist ein Beispiel: JsFiddle

Wenn Sie ein möchten Hintergrund-Bild für Ihr Element, ich denke, der beste Weg ist immer noch, es in einen Container mit dem Rand zu wickeln.

Answer 4

Opazität Hintergrund aber nicht Grenze css

Demo here

html

<div id="element"></div> 

css

#element{ 
    width: 156px; 
    height: 156px; 
    border: 2px solid #96d5ea; 
    background:rgba(150, 213, 234,1); 
    margin: 35px auto; 
    -webkit-transform: rotate(-45deg); 
    -webkit-transition: all 1s ease; 
} 

#element:hover { 
    background:rgba(150, 213, 234,0); 
    -webkit-transform: rotate(315deg); 
}