16

さて、私はこの質問をしていて、誰かがすでに似たようなことを尋ねているのを見ますが、これはまだ理解していません。

私がやりたいのは、要素に不透明度0.7を設定することですが、境界線ではなくコンテンツだけに設定し、境界線をフルカラーのままにします。ここにいくつかのサンプルコード：

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

その結果、入力要素には不透明度がありますが、境界線さえあります。誰かがコンテンツだけで不透明度を設定する方法を教えてもらえますか？

ありがとう。

4

4 に答える 4

25

rgba色と背景の両方に構文を使用し、要素全体に不透明度を使用しない

デモ・ダブレット

input {
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    background: rgba(255, 255, 255, .8);
    color: rgba(0, 0, 0, .8);
}
于 2012-11-26T05:42:44.840 に答える
3

質問が入力要素に関するものだとは思いませんでしたが、私の答えが他の誰かの助けになるかもしれません。

他のポスターが言ったように、rgba構文を使用して背景色を定義できます。

変更したい要素にネストされた要素がある場合は、次のopacitycss を使用して要素に適用することもできます。

#element > * {
    opacity:0.8;
}

以下に例を示します。

要素の背景画像が必要な場合は、境界線のあるコンテナーでラップするのが最善の方法だと思います。

于 2012-11-26T06:04:55.490 に答える
0

プロパティを使用して、 notおよびofbackground:rgbaにのみ影響する目的の結果を得ることができます。parentchildborderparent

CSS

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

デモ

于 2012-11-26T05:45:46.007 に答える