背景だけを透過させるCSSの書き方

公開日: : CSS

CSS

タイトルの通り、背景だけを透過させるCSSの書き方。

簡単にいうと、

背景の色と透明度をrgba()で指定する



これだけ。

下のサンプルは白を透明にしたもの。

.sample {
 background-color: rgba(255, 255, 255, 0.5);
}



最初の3つで色を指定。
最後の0.5が透明度です。

でも、対応していないブラザがあるそう。

それには、filter: alpha()を使うのだそうです。

以下のサイトを参考にさせて頂きました。


上を参考に、結果は以下です。

.sample {
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
 background-color: rgba(255, 255, 255, 0.5);
}


参考サイトのまんまです。

かえラボBlogさん、ありがとうございました。

ad

関連記事

CSS

Google Map(グーグルマップ)をレスポンシブ対応に。

Google Mapを埋め込むときにレスポンシブ対応させる方法。 そのままコピペすれば

記事を読む

Web

Adobe Typekitで、一瞬違うフォントが表示される時の対処法

最近、Adobe Typekitを使用し始めたのですが ページを表示させた際、 一瞬です

記事を読む

CSS

文字の強調『傍点』をCSSで表現するには

文字の上に点々をつけて、強調させる傍点をCSSで表現する方法のメモ。

記事を読む

CSS

蛍光ペンで線を引いたようなラインをCSSで。

CSSでちょっとだけテキストにオシャレな小技を。 CSSだけで少し手書き感を出した

記事を読む

CSS

CSSだけで矢印をつくる方法

参考サイトのままです。 メモなので、簡単に。 情報元:スマートフォン

記事を読む

CSS

CSSでナンバリングする方法(CSSでナンバーを付ける)

ランキングにCSSでランキングの数字を付けたくて、方法を探してみました。 このサイトの

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑