Opacità elemento ma non bordo

Question

Bene, ho questa domanda e vedo che qualcuno ha già chiesto qualcosa di simile ma questo non lo capisco ancora.

Quello che voglio fare è impostare un'opacità di 0,7 su un elemento ma solo sul contenuto e non sul bordo, voglio che il bordo rimanga a colori. Qualche esempio di codice qui:

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

Il risultato è che il mio elemento di input è l'opacità, ma anche il confine, Qualcuno può dirmi come impostare l'opacità solo nel contenuto, ma non il confine?

Grazie.

Answer 1

Usa rgba sintassi sia per il colore e lo sfondo e non usare l'opacità per intero elemento

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

È possibile utilizzare background:rgba immobili per i risultati desiderati che effettuerà solo il tuo parent non il child e anche per lo border di 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

non ho visto che la questione era di circa un elemento di input, ma forse la mia risposta sarà aiutare qualcun altro, così ci siamo.

Come altri utenti hanno detto, è possibile utilizzare la sintassi rgba per definire il colore di sfondo.

Se ci sono elementi annidati in quello che si desidera modificare, è anche possibile applicare la opacity a loro con questo css:

#element > * { 
    opacity:0.8; 
} 

Ecco un esempio: JsFiddle

Se si desidera un immagine di sfondo per il tuo elemento, penso che il modo migliore sia ancora di avvolgerlo in un contenitore con il bordo.

Answer 4

opacità di fondo, ma non css confine

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); 
}