DigiPress

Highly Flexible WordPress Theme

メニュー

画像(img)を指定すると背景画像も同期してぼかし表示するサンプルコード

2018/08/18
画像(img)を指定すると背景画像も同期してぼかし表示するサンプルコード

最近、様々なアプリ、Webサイト、iCloudやOS Xのログイン画面で見かける、背景画像をぼかしてその上に画像やテキストなどのコンテンツを表示する、若干視差効果のついたWebページを簡単に表示するサンプルコードをつくってみました。

See the Pen Synchronize the background image with img tag by digistate (@digistate) on CodePen.

やっていることはごく単純です。
ページを表示すると、中央に表示している画像(imgタグ)のURLを取得して、ページの背景画像(background-image)としてセットしているだけです。

使い方

HTMLにあるimgタグのsrc属性値(画像URL)をお好みの画像URLに差し替えるだけです、簡単!

<!-- https://unsplash.it/500/500?image=646を任意のものに変更 -->
<img src="https://unsplash.it/500/500?image=646" class="main-img" />

背景画像用(#main-bg)のCSSには、予めフィルタープロパティでぼかし(blur)と明るさ(brightness)を指定してあるので、お好みに応じて値は変更してください。

filter:blur(15px) brightness(85%);
-webkit-filter:blur(15px) brightness(85%);
Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly
Send to LINE