[解決済み】CSS3 透明度+グラデーション
2022-04-17 07:09:04
質問
RGBAは非常に楽しいものであり、同様に
-webkit-gradient
,
-moz-gradient
そして...
progid:DXImageTransform.Microsoft.gradient
...そうだな :)
RGBAとグラデーションの2つを組み合わせて、最新のCSS仕様でアルファ透過のグラデーションを作る方法はないでしょうか。
どのように解決するのですか?
webkitとmozの両方のグラデーション宣言でrgbaを使用することができます。
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);
( src )
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);
( src )
どうやらIEでも、奇妙なquot;extended hex"構文を使って、これを行うことができるようです。最初のペア(例では55)は、不透明度のレベルを参照しています。
/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);
/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);
( src )
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか?
-
[解決済み] javascript(またはjQuery)を使って::beforeや::afterなどのCSS疑似要素を選択し、操作する。
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] CSSでFirefoxだけをターゲットにする
-
[解決済み】CSS3のグラデーション背景がbodyに設定されても伸びず、繰り返される?
-
[解決済み】グラデーション背景でCSS3トランジションを使用する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】display:noneの反対語はあるのか?
-
[解決済み] <div style="display:none">によるテーブルデータの非表示。
-
[解決済み] CSS - div から画面の幅いっぱいまでオーバーフローさせる方法
-
[解決済み] ブラウザでCSSファイルが更新されない
-
[解決済み] Bootstrap 3でnavbar-static-topは何をするのですか?
-
[解決済み] Bootstrapのポップオーバーの幅を変更する
-
[解決済み] Bootstrap 4のナバーボタンのアイコンの色を変更するにはどうすればよいですか?
-
[解決済み] bootstrap 4 でカードブロックの不透明度を変更する方法
-
[解決済み] 四角いボタンの作り方
-
[解決済み] ブルマのテーブルをレスポンシブにするにはどうしたらいいですか?