skillup

技術ブログ

UI

CSSで背景画像の出力 ~透過編~

投稿日:2016年3月7日 更新日:

前回CSSで大きな背景画像のなかにhtmlを置く方法をメモしたんですが、背景画像を透過させたいときなどのメモを書いておきます。

一般的に画像の透過といえばCSSでopacity:0.6とかやれば簡単なんですが、背景画像には少し工夫がいります。

通常のCSSのほかに背景画像だけに用意したCSSが必要になってきます。

参考リンク

Transparent Background Images

CSS Background Opacity [duplicate]

-UI
-

執筆者:


comment

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

関連記事

no image

アプリケーションの画面構成に関して

アプリケーションの画面の設計スタイルに関してよく使われるものを。 Contents1 2パネルのセレクタ2 カンバスとパレット3 1ウィンドウでのドリルダウン4 代替表示5 ウィザード6 オンデマンド …

no image

cakePHPのSSL設定+jQueryのError Loading Page

cakeで作ったアプリの認証画面でhttps環境だとError Loading Pageというエラーメッセージがでてしまい、ログインできないという事象が発生。 最初はSSLが原因かとおもっていたんです …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

検索ページの遷移に関して

検索ページの遷移に関してメモ。 基礎だが実際全部完全に網羅できているかというと不安な部分が多い。 Contents1 基本仕様: 以下のようなページ構成を想定2 想定しないといけない遷移状態3 よくあ …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …