【サンプルコードあり】トップ画像にスモーク効果つけて、ロゴやタイトル入れるとロゴやタイトルにもスモーク効果がついて見にくくなった。それを解消するのに見つけたコードの書き方。

CSS で画像にスモーク効果をあてるのは簡単で、
いろんなパターンがあります。

この記事では、トップ画像にスモーク効果つけて、ロゴやタイトル入れると
ロゴやタイトルにもスモーク効果がついて見にくくなった。
それを解消するコードの書き方１つ見つけたので、記事にしました。

でも、ヘッダー画像などに使って、文字・ロゴ・ナビ・ボタンなど
を入れようとすると、文字等にもスモークがかかる。

最初は、position: absolute;使って、画像のトップに
ロゴやナビ配置してみた。

パソコン表示の場合は問題ない感じ。
でもレスポンシブで、ロゴやボタンの位置などの操作が
ちょっと難しくなった。

そこで今回画像のトップにロゴやナビ配置するのを、
position: absolute;を使うのじゃなく、他の方法で
出来ないか何パターンかやってみた。

実際にうまく出来た方法
1. 実際に書いたコード
もう一つうまくいった方法
別のうまくいかなかった例

実際にうまく出来た方法

何パターンかやってみた結果。
このパターンだと今回うまく出来ました。

その方法がこれになります。
background-image: url(../imgs/top.jpg);
background-color: rgba(0, 0, 0, 0.25);
background-blend-mode: overlay;

今回は、ロゴ・ナビ・文字のコードを普通に書いて、
それを、今回は class=”header” 囲んで、そこに

background-imageで画像表示

background-color: rgba(0, 0, 0, 0.25);
background-blend-mode: overlay;
でスモークをつけるようにしたら出来ました。

実際に書いたコード

HTML

      <header class="header">
        <div class="header-inner">
          <div class="h-title-box">
            <div class="h-title">
              <a href=""><img class="h-logo" src="http://inomiti.com/a/lnk/inologo/" alt="logo"></a>
            </div><!-- /.h-title -->
            <div class="m-btnbox h-btn-botom">
              <a href="#otoiawase" class="h-btn-text">お問い合わせ</a>
            </div>
          </div><!-- /.h-title-box -->
          <div class="h-box">
            <h2 class="h-h2">サイトコーディング<br>
              何でもご相談ください</h2><!-- /.h-h2 -->
          </div><!-- /.h-box -->
        </div><!-- /.header-inner -->
      </header><!-- /.header -->

</div>

<a href="#otoiawase" class="h-btn-text">お問い合わせ</a>

</div>

</div>

<h2 class="h-h2">サイトコーディング<br>

何でもご相談ください</h2>

</div>

</div>

</header>

CSS

.header {
  position: relative;
  width: 100%;
  background-image: url(http://inomiti.com/a/lnk/256/);
  /* background-color: #404040; */
  background-color: rgba(245, 205, 241, 0.25);
  background-blend-mode: overlay;
  background-size: cover;
  margin-bottom: 50px;
}

.header-inner {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  height: 700px;
}

.h-title-box {
  max-width: 1500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 50px 0 30px;
}

.h-title {
  width: 250px;
}
.h-title img {
  max-width: 100%;
  object-fit: cover;
}

/* お問い合わせボタン */
.m-btnbox a {
  display: inline-block;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  padding: 10px 50px;
  background: #63B13C;
  border-radius: 30px;
}

.m-btnbox a:hover {
  color: #333;
  transition:0.5s;
  background: #c4e6b6;
  transition:0.5s;
}

.h-h2 {
  position: absolute;
  color: #fff;
  font-size: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


@media (max-width:1170px) {
.header-inner {
    height: 600px;
  }
  
  @media (max-width:820px) {
.header-inner {
  height: 550px;
}
  .h-btn-text {
  font-size: 20px;
}
.h-h2 {
  font-size: 35px;
}
    
    
@media (max-width:720px) {

.h-h2 {
font-size: 28px;
}
  
@media (max-width:600px) {

.header-inner {
  height: 500px;
}
.h-btn-botom {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
}
.h-btn-text {
  font-size: 15px;
  padding: 8px 20px;
}
.h-h2 {
  font-size: 23px;
}
  
  
 @media (max-width:480px) {
  .header-inner {
    height: 450px;
  }

  .header {
    background-color: rgba(0, 0, 0, 0.15);
  }

.h-h2 {
  width: 80%;
  text-align: center;
  font-size: 20px;
}
   
@media (max-width:340px) {

  .header-inner {
    height: 400px;
  }
.h-title {
  width: 150px;
}
.h-btn {
  width: 80%;
  margin: 250px auto 0 auto;
}

.m-btnbox a {
  font-size: 14px;
  padding: 15px 25px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

.header {

position: relative;

width: 100%;

background-image: url(http://inomiti.com/a/lnk/256/);

/* background-color: #404040; */

background-color: rgba(245, 205, 241, 0.25);

background-blend-mode: overlay;

background-size: cover;

margin-bottom: 50px;

}

.header-inner {

width: 100%;

max-width: 1500px;

margin: auto;

height: 700px;

}

.h-title-box {

max-width: 1500px;

display: flex;

justify-content: space-between;

align-items: center;

padding: 30px 50px 0 30px;

}

.h-title {

width: 250px;

}

.h-title img {

max-width: 100%;

object-fit: cover;

}

/* お問い合わせボタン */

.m-btnbox a {

display: inline-block;

color: #fff;

font-size: 24px;

text-decoration: none;

padding: 10px 50px;

background: #63B13C;

border-radius: 30px;

}

.m-btnbox a:hover {

color: #333;

transition:0.5s;

background: #c4e6b6;

transition:0.5s;

}

.h-h2 {

position: absolute;

color: #fff;

font-size: 40px;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

@media (max-width:1170px) {

.header-inner {

height: 600px;

}

@media (max-width:820px) {

.header-inner {

height: 550px;

}

.h-btn-text {

font-size: 20px;

}

.h-h2 {

font-size: 35px;

}

@media (max-width:720px) {

.h-h2 {

font-size: 28px;

}

@media (max-width:600px) {

.header-inner {

height: 500px;

}

.h-btn-botom {

position: absolute;

bottom: 30px;

left: 50%;

transform: translateX(-50%);

margin: auto;

}

.h-btn-text {

font-size: 15px;

padding: 8px 20px;

}

.h-h2 {

font-size: 23px;

}

@media (max-width:480px) {

.header-inner {

height: 450px;

}

.header {

background-color: rgba(0, 0, 0, 0.15);

}

.h-h2 {

width: 80%;

text-align: center;

font-size: 20px;

}

@media (max-width:340px) {

.header-inner {

height: 400px;

}

.h-title {

width: 150px;

}

.h-btn {

width: 80%;

margin: 250px auto 0 auto;

}

.m-btnbox a {

font-size: 14px;

padding: 15px 25px;

}

今回はこの書き方で、画像にスモーク効果あてて
文字にスモークがかかることなく表示することが出来た。

今回の方法は、スマホ画面になった時に、
ロゴとお問い合わせボタンを、画像の上下の端に配置したので
こんな感じになりました。

ハンバーガーメニューやボタンを消す場合は、
また違う方法でも可能になります。

もう一つうまくいった方法

こっちの方法でも、出来ました。

background-color: #5e5e5e;

background-blend-mode: overlay;

で指定する方法です。

ただ、こっちの方法は、色の透明度の指定を入れずに

カラーコード使ってるので、色合わせ面で難しかった。

こっちはレスポンシブはやってないです。

コードは、ほぼ同じ

HTML

    <header class="header1">
      <div class="header-inner1">
      <div class="h-title-box1">
        <div class="h-title1">
          <a href=""><img class="h-logo1" src="./img/logo.png" alt="logo"></a>
        </div><!-- /.h-title -->
        <div class="m-btnbox1 h-btn-botom1">
          <a href="#otoiawase" class="h-btn-text1">お問い合わせ</a>
        </div>
      </div><!-- /.h-title-box -->
      <div class="h-box1">
        <h2 class="h-h2">外構工事のことなら<br>
          何でもご相談ください</h2><!-- /.h-h2 -->
      </div><!-- /.h-box -->
    </div><!-- /.header-inner -->
    </header><!-- /.header -->

</div>

<a href="#otoiawase" class="h-btn-text1">お問い合わせ</a>

</div>

</div>

<h2 class="h-h2">外構工事のことなら<br>

何でもご相談ください</h2>

</div>

</div>

</header>

CSS

.header1 {
  /* position: relative; */
  width: 100%;
  background-image: url(http://inomiti.com/a/lnk/256/);
  background-color: #8d8d8c;
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
}

.header-inner1 {
  max-width: 1500px;
  margin: auto;
  height: 700px;
}
.h-smork {
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.25;
}

.h-title-box1 {
  max-width: 1500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 50px 0 30px;
}

.h-title1 {
  width: 250px;
}
.h-title1 img {
  max-width: 100%;
  object-fit: cover;
}

/* お問い合わせボタン */
.m-btnbox1 a {
  display: inline-block;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  padding: 10px 50px;
  background: #63B13C;
  border-radius: 30px;
}

.m-btnbox1 a:hover {
  color: #333;
  transition:0.5s;
  background: #c4e6b6;
  transition:0.5s;
}

.h-box1 h2 {
  position: absolute;
  color: #fff;
  font-size: 48px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.header1 {

/* position: relative; */

width: 100%;

background-image: url(http://inomiti.com/a/lnk/256/);

background-color: #8d8d8c;

background-blend-mode: overlay;

background-size: cover;

background-position: center;

margin-bottom: 50px;

}

.header-inner1 {

max-width: 1500px;

margin: auto;

height: 700px;

}

.h-smork {

width: 100%;

height: 100%;

background: #000000;

opacity: 0.25;

}

.h-title-box1 {

max-width: 1500px;

display: flex;

justify-content: space-between;

align-items: center;

padding: 30px 50px 0 30px;

}

.h-title1 {

width: 250px;

}

.h-title1 img {

max-width: 100%;

object-fit: cover;

}

/* お問い合わせボタン */

.m-btnbox1 a {

display: inline-block;

color: #fff;

font-size: 24px;

text-decoration: none;

padding: 10px 50px;

background: #63B13C;

border-radius: 30px;

}

.m-btnbox1 a:hover {

color: #333;

transition:0.5s;

background: #c4e6b6;

transition:0.5s;

}

.h-box1 h2 {

position: absolute;

color: #fff;

font-size: 48px;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

別のうまくいかなかった例

この方法は、画像を background-image で入れるんじゃなく、
imgとしてHTMLの方で、画像指定してる方法です。

この方法ですると、ロゴとボタンを、position: absolute;
で配置する必要があります。

ただ、ロゴとボタンのまとまりをposition: absolute;で指定すると
display: flex;が効かなかった。

ロゴとボタンそれぞれ個別で、position: absolute;で場所指定
して配置してみました。

この方法だと。画像が広がった時に、ロゴとボタンも追従して
外に広がっていってしまう状態になる。

書いたコード

HTML

    <section class="sita-box">
          <p class="colorfilter-base">
      <img src="http://inomiti.com/a/lnk/256/" alt="カラーフィルタ効果の対象画像" class="colorfilter-image">
  </p>
      <div class="h-title-box2">
        <div class="h-title2">
          <a href=""><img class="h-logo" src="http://inomiti.com/a/lnk/inologo/" alt="logo"></a>
        </div><!-- /.h-title -->
        <div class="m-btnbox2 h-btn-botom">
          <a href="#otoiawase" class="h-btn-text">お問い合わせ</a>
        </div>
      </div><!-- /.h-title-box -->

</section><!-- /.sita-box -->

</p>

</div>

<a href="#otoiawase" class="h-btn-text">お問い合わせ</a>

</div>

</div>

</section>

CSS

.h-title2 {
  width: 250px;
}

.h-title2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 250px;
}
.h-title2 img {
  max-width: 100%;
  object-fit: cover;
}
.m-btnbox2 {
  position: absolute;
  top: 45px;
  right: 50px;
}
.m-btnbox2 a {
  display: inline-block;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  padding: 10px 50px;
  background: #63B13C;
  border-radius: 30px;
}

.colorfilter-base {
  background-color: rgba(245, 205, 241, 0.25); 
}
.colorfilter-image {
  position: relative;
  width: 100%;
  height: 100vh;
  opacity: 0.8;
  display: block;
  object-fit: cover;
}