要素の不透明度は境界線ではありません

Question

まあ、私はこの質問があり、誰かがすでに何か似たような質問をしていることがわかりますが、これはまだ分かりません。

私がしたいのは、要素に0.7の不透明度を設定することですが、境界線ではなく内容にのみ、境界線をフルカラーにしたいと考えています。ここではいくつかのサンプルコード：

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

結果は、誰かがどのようにコンテンツだけではなく、国境に不透明度を設定する方法を教えてもらえます、私の入力要素が不透明でさえボーダーを持っているということでしょうか？

ありがとうございます。あなただけのparentないchildに影響します

Answer 1

使用rgba構文の両方ご希望の結果を得るためbackground:rgbaプロパティを使用することができます

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

素子全体の不透明度を使用して色と背景のためとされず、 borderが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

ので、ここで行く、私は質問が入力要素についてだったことがわかりませんでしたが、多分私の答えは、他の誰かを助けます。

他のポスターが述べたように、rgba構文を使用して背景色を定義することができます。変更したい1内のネストされた要素がある場合

、あなたも、このCSSでそれらにopacityを適用することができます：あなたがしたい場合JsFiddle

：ここ

#element > * { 
    opacity:0.8; 
} 

は一例ですあなたの要素の背景画像、私は最良の方法は、まだ境界線を持つコンテナにラップすると思います。

Answer 4

不透明な背景ではなく、国境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); 
}