ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

超簡単!cssを使って背景画像のみ透過にする方法

2016年11月5日
css

コーディング作業をしていて、背景色をopacityで透過にすることはよくありますが、それとは少し違って背景画像のみを透過にすることもたまにあります。
背景色と背景画像の違いなので、やることは同じだろうと思うかもしれませんが、背景画像の場合、opacityで透過すると中にある子要素まで透過されてしまうので意外にめんどくさいのです。

最初の頃は背景画像のみを透過にする方法が分からず、透過された画像として書き出して対応していました。
お恥ずかしい限り、、、

対処法として、親要素と子要素の間にひとつ階層を作ってあげて、あとはcssを少し書いてあげれば簡単に対応することができます!

ではその、cssを使って背景画像のみを簡単に透過にするサンプルコードを記載しておきますので、参考にでもなればと思います。

html

1
2
3
4
5
<div class="sampleWrap">
  <div class="bkRGBA">
    <p class="sample">文字は透過しないぞー!!</p>
  </div>
</div>

スポンサードサーチ

css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.sampleWrap{
  position: relative;
  width: 1000px;
  height: 600px;
  margin: 0 auto;
  background: url(./bkOpacity.jpg) no-repeat;
}
 
.bkRGBA{
  /* 背景画像の透過用css */
  height: 100%;
  background: rgba(255,255,255,0.5);
}
.sample{
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 600px;
  height: 50px;
  margin: auto;
  font-size: 50px;
}

上記のサンプルコードに書いてあるように、親要素(今回.sampleWrap)と透過したくない子要素(.sample)の間に新たにdiv(.bkRGBA)などで階層を作ってあげ、そのdivに対して高さ(height)とbackground:rbga(255,255,255,0.5);を書いてあげれば良いということです!

こうすることによって、背景画像と透過したくない子要素の間に一枚透過の膜ができるような感じになります。

上記のコードで、実際にはこんな感じに表示されます。

bkopacity

cssだけで簡単に実装できますね♪

関連記事

  • 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法2017年4月19日 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法
  • 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法2016年11月10日 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法
  • 【jQuery】ファーストビュー(画面全体)に背景画像をスライダーで表示させる方法(prev , next , ページャー付き)2017年11月10日 【jQuery】ファーストビュー(画面全体)に背景画像をスライダーで表示させる方法(prev , next , ページャー付き)
  • 【css3】背景を斜線にするlinear-gradientの書き方2016年10月23日 【css3】背景を斜線にするlinear-gradientの書き方
  • Androidのスマホ画面を横向きに見た時にヘッダーが崩れる!?そんな時の対処法!2016年12月13日 Androidのスマホ画面を横向きに見た時にヘッダーが崩れる!?そんな時の対処法!

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.