gurelog

エンジニアになるため、日々学んだことをまとめています

【HTML/CSS】背景画像を透過するには?

こんにちは。gureです。

 

前の記事で背景画像を設定した際に、フォームとかぶっているような所は背景画像の色を薄めたいなあと思いました。

今回はその方法を備忘録がてら記録しておこうと思います。

 

白い半透明の紙を挟む!

背景画像と本体(?)の間に白い半透明の紙を挟むようなイメージで、背景画像が透過されているように見せる方法です。

透過する前はこんな感じ。ボタンだけが浮いてますねえ。

 

透過前

 

コード

今回はRailsで実装しています。

index.html.erb

<div class="background">
 <div class="opacity-paper">
   <div class="wrapper">
     <%= link_to "A", root_path, class: "index-btn" %>
     <%= link_to "B", root_path, class: "index-btn" %>
     <%= link_to "C", root_path, class: "index-btn" %>
     <%= link_to "D", root_path, class: "index-btn" %>
     <%= link_to "E", root_path, class: "index-btn" %>
     <%= link_to "F", root_path, class: "index-btn" %>
     <%= link_to "G", root_path, class: "index-btn" %>
   </div>
 </div>
</div>

index.css

.background {
 background-image: url(images/background.png);
 background-size: cover;
}

.opacity-paper {
 background: rgba(255,255,255,.5);
 width: 400px;
 height: 100%;
}

.wrapper {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.index-btn {
 color: #dfbb76;
 line-height: 50px;
 width: 300px;
 height: 50px;
 border: 2px solid #dfbb76;
 border-radius: 30px;
 color: #dfbb76;
 text-align: center;
 font-size: 20ox;
 background-color: #ffffff;
 margin: 20px;
 text-decoration: none;
}

background: rgba(255,255,255,.5);

で、透明度を指定してあげています。

 

また、今回はbackground.pnはapp/assets/stylesheets/images内に置きましたが、こちらに置くとデプロイした際に反映されないので、下記の記事のように置いてあげて下さい。

https://gure-y.hatenablog.com/entry/2020/09/20/230536

 

出来上がり図

透過後

背景の画像が薄くなってちょっとボタンが見やすくなりました。

 

他にも方法はあるようですが、この方法がとてもわかりやすかったので今回はこちらの方法で実装しました。

 

おしまい。

 

参考資料

https://medium.com/slipshod-style/css-%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%AE%E3%81%BF%E3%82%92%E9%80%8F%E9%81%8E%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-f035c1ee71c