CSSだけでグ○シー風の背景画像を配置する方法

CSSだけでグ○シー風の背景画像を配置する方法

グ○シーみたいなメインビジュアル画像をCSSだけで実現できるので紹介します。

だいたいこんな感じ

サンプル

ブログなどのメインビジュアルなどに使えそうな手法ですね。HTMLとCSSだけでできてしますのでおすすめです。

HTML

基本的な構造としてhero部分とcontent部分で分かれています。heroの背景画像をstyle属性で背景画像を配置していますが、これはページごとに違う背景画像を配置する想定でなのでこのようにしています。

<div class="c-hero">
  <div class="c-hero__content">
    <p class="c-hero__avatar c-avatar">
      <img src="sample.jpg" alt="" />
    </p>
    <h2 class="c-title">グ○シー風の背景画像</h2>
    <p class="c-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <div class="c-hero__bg" style="background-image: url(sample.jpg)"></div>
</div>

CSS

hero 基本スタイル

hero部分の基本スタイルです。背景画像の.c-hero__bgに対して:beforeでぼかしをつけ、:afterでグレーアウトしています。

正直、これだけでグ○シー風になっちゃいます。

.c-hero {
  margin: 0;
  position: relative;
}
.c-hero__bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  overflow: hidden;
  height: 180px;
  color: #fff;
}

.c-hero__bg:before{
  content: '';
  background: inherit
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}

.c-hero__bg:after{
  content: '';
  background-color: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 0;
}

avatar部分のスタイル

avatar: サンプル画像の丸く切り取られたような画像の部分です。画像であるimgよりも親要素を半分の大きさにしています。それよりもはみ出た部分をoverflow: hiddenで隠しています。

この方法を覚えておくと、一覧などである丸い画像を簡単に作れちゃいます。

あとは、文字の色や大きさなどのスタイルを設定して完了。

.c-hero__avatar{
  float: left;
  margin-right: 16px;
}

.c-hero__content{
  z-index: 2;
  color: #fff;
  position: absolute;
  width: 90%;
  height: 150px;
  top: 16px;
  left: 5%;
  overflow: hidden;
}
.c-avatar {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
  overflow: hidden;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}

.c-avatar img {
  margin-left: -60px;
  width: 240px;
}

.c-title{
  font-size: 20px;
  font-weight: normal;
  margin: 24px 0 8px;
}

.c-text{
  font-size: 12px;
  margin: 0 0 8px;
}

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

同じカテゴリーの記事

ページの先頭へ