CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3を使って画像に不透明度（透過効果）を適用する方法

CSS3で画像に不透明度を適用したい場合は、filterプロパティの値としてopacity()関数を使用します。これにより、画像を半透明にして背景と自然に馴染ませるなど、さまざまな視覚効果を実現できます。

基本的な使い方

不透明度はパーセンテージで指定します。例えばopacity(60%)と指定すると、画像の不透明度が60%になり、40%分透過した状態で表示されます。

サンプルコード

実際のコード例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
    filter: opacity(60%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

この例では、同じ画像を2つ表示しています。1つ目は通常の状態、2つ目はdemoクラスを適用し、filter: opacity(60%)によって半透明化したものです。

実行結果

CSS3を使って画像に不透明度（透過効果）を適用する方法

補足ポイント

  • opacity()の値は0%〜100%の範囲で指定でき、0%で完全に透明、100%で完全に不透明になります。
  • 小数値での指定も可能です。例えばopacity(0.6)は60%と同じ意味になります。
  • 古いブラウザとの互換性が必要な場合は、-webkit-filterなどのベンダープレフィックスを併用するとよいでしょう。
  1. CSS3のtransformで実現！要素の2D変換の基本と使い方

    2D変換とは？CSS3の2D変換（2D Transform）は、translate（移動）、rotate（回転）、scale（拡大・縮小）、skew（傾斜）などの関数を使って、HTML要素の位置や形状を自由に変更できる機能です。これらの変換を組み合わせることで、従来はJavaScriptが必要だった視覚効果を、CSSだけで手軽に実現できます。主な2D変換関数一覧No.値と説明1matrix(n,n,n,n,n,n)6つの値を指定して、行列による変換を定義します。2translate(x,y)X軸・Y軸の両方向に沿って要素を移動させます。3translateX(n)X軸方向に沿って要素を移動させ

  2. CSS3のword-breakプロパティで改行ルールを指定する方法

    CSS3で改行（ワードブレイク）のルールを指定するには、word-breakプロパティを使用します。このプロパティは、テキストがコンテナの幅を超えた場合に、どのように行を折り返すかを制御するものです。word-breakプロパティに指定できる主な値は以下のとおりです。normal：デフォルトの改行規則に従います。日本語や中国語などのCJK言語では任意の位置で改行されますが、英語などの欧文ではスペースやハイフンがある箇所でのみ改行されます。break-all：言語に関係なく、任意の文字の間で改行を許可します。英語のような単語の途中でも強制的に折り返されるため、幅の狭いコンテナで長い英単語を表示し