Öğe opaklığı ama kenarlık yok

Question

Eh, bu soruyu alıyorum ve birisinin zaten benzer bir şey sorduğunu gördüm, ancak bu henüz anlamadım.

Yapmak istediğim şey, bir öğeye 0.7'lik bir opaklık ayarlamak, ancak yalnızca içeriğe değil, kenarlığa ayarlamaktır, kenarlığın tam renkli kalmasını istiyorum. Burada bazı örnek kod:

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

sonuç benim giriş elemanı saydamlığını ama hatta sınırı olmasıdır, birisi nasıl sadece içerik olarak saydamlığını ayarlamak için değil, sınır söyleyebilir mi?

Teşekkür ederiz. İstediğiniz sonuçları için background:rgba özelliğini kullanabilirsiniz

Answer 1

Kullanım rgba sözdizimi hem tüm eleman

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

için saydamlığını kullanmak renk ve arka plan için değil sadece etkileyecek senin parent değil child ve aynı zamanda'un 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

ben soru bir giriş öğesi hakkında olduğunu görmedik, ama belki cevabım başkasını yardımcı olacak, böylece işte başlıyoruz.

Diğer posterler gibi, arka plan renginizi tanımlamak için rgba sözdizimini kullanabilirsiniz. Değiştirmek istediğiniz birinde iç içe unsurlar varsa

, ayrıca bu css ile bunlara opacity uygulayabilirsiniz: Bir isterseniz JsFiddle

: Burada

#element > * { 
    opacity:0.8; 
} 

bir örnektir elementiniz için arka plan görüntüsü, bence en iyi yol hala sınırla birlikte bir kap içinde sarmaktır.

Answer 4

donukluk arka plan ancak sınır 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); 
}