文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 画像のデザイン > 画像を半透明にする

画像半透明にするCSSの生成

写真やイラストなどの画像を半透明にする場合はCSSの「opacity」を使用すれば簡単に出来ます。
当ページでは画像を半透明にするサンプルCSSを透過度を指定するのみで作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

画像を透過して見よう

透明度
サンプル画像
使用したhtml
<div class="imgArea">
  <img src="img.jpg" class="throu" alt="サンプル画像">
</div>
生成したCSS
.imgArea{
  position: relative;
  padding : 0
}
.throu{
  opacity : 0.3;
}
ページTOP

透過指定の使用例

画像を透過させることで、タイトルの背景に使用することも可能です。

サンプル画像
タイトル
<style type="text/css">
.throu1 {
  position: relative;
  opacity : 0.6;
  left: 50%;
  transform: translate(-50%);
}
.over{
  position: absolute;
  display: inline-block;
  color: rgba(64, 64, 255, 0.8);
  font-size: 20pt;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding:10px;
}
</style>
広告
広告
ページTOP

注意事項

特になし

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン