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 ナビ …

no image

ページレイアウトに関して

今回からは単一のページレイアウトの構成の考え方やテクニックについて。 一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。 人の視線は上から下、左から右へというのがディフォ …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …