文字の画像(イメージ)化
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
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの？
生成コードに利用制限はある？
生成コードに保証はある？
jQueryで生成できない？

広告
ページTOP

当サイト内の関連するページ

便利なCSS、JavaScriptの自動生成一覧

画像の点滅

半透明画像

遠近・奥行

画像の回転

スクロール

影付け

傾斜・斜体

スライド

3D画像の回転

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