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

マウスオーバーで画像の不透明度を変更する

：hoverセレクターでopacityプロパティを使用して、マウスオーバー時の不透明度を変更します。以下は、マウスオーバーで画像の不透明度を変更するコードです-

例

<!DOCTYPE html>
<html>
<head>
<style>
body{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.transparent{
   width:270px;
   height:200px;
   opacity: 1;
   transition: 0.3s;
}
.transparent:hover{
   opacity: 0.3;
}
</style>
</head>
<body>
<h1>Image opacity on hover example</h1>
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
<h2>Hover over the above image to change its opacity</h2>
</body>
</html>

出力

上記のコードは次の出力を生成します-

マウスオーバーで画像の不透明度を変更する


  1. Mac で背景を変更する方法

    壁紙の背景あなたのことをたくさん話してください。同意しませんか？パーソナライズされた画像を背景として見ることほど楽しいことはありません。それは、あなたの小さなペットのかわいい写真、結婚式の率直な画像、または単にあなたの顔に笑顔をもたらす美的なものであれば何でも構いません. 画像ソース:YouTube 同じデフォルトの背景を維持するのは退屈すぎます。ではない？幸いなことに、macOS には、Mac の背景を変更するためのさまざまなオプションが用意されています。 Mac には、選択できるデフォルトの壁紙がたくさんあります。ただし、カスタマイズした背景を壁紙として設定することもできます。さあ、あ

  2. Windows 10 でマウスの感度を変更する方法

    重要なプレゼンテーション ファイルを探していて、上司が目の前に立っていると、突然マウスが反応しなくなったとします。あなたならどうしますか? これは、Windows 10 のマウス感度に問題がある場合によく発生します。 Windows 10 でマウスの感度を変更する方法 心配はいりません。Windows 10 でマウスの感度を調整する方法をいくつかご紹介します。始めましょう! 修正 1 - 設定アプリから Win キーと I を同時に押して設定アプリを開き、[デバイス] をクリックします。 [デバイス] で、左ペインの [マウス] まで下にスクロールします。 [追加のマウス