画像の半透明処理 画像と半透明の背景の実装のアイデアとコード

画像の半透明処理 画像と半透明の背景の実装のアイデアとコード

コードをコピー
コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<ヘッド>
<meta http-equiv="コンテンツタイプ" content="text/html;charset=UTF-8" />
<title>マスクレイヤー</title>
</head>
<スタイル タイプ="text/css">
*{マージン:0;パディング:0;}
ul{マージン:100px 自動0; 幅:200px;}
img{境界線: 0 なし;}
li{背景色:#555;リストスタイル:なし;幅:146px;高さ:220px;}
a:hover{不透明度: 0.6;}
</スタイル>
<本文>
<ul>
<li><a href=""><img src="upload/2022/web/64380cd7912397dd9e0581b65982b2b7d0a28707.jpg" alt="" /></a></li>
</ul>
</本文>
</html>

原則:liに背景を追加し、liのサイズは画像のサイズであり、a:hoverのときにaの透明度を変更します。

<<:  Redo ログと Undo ログに基づく MySQL クラッシュ回復の分析

>>:  この記事では、CSSの2列レイアウトと3列レイアウトの具体的な使い方をまとめます。

推薦する

Dockerコンテナの接続と通信の実装

ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...

マインスイーパゲームを実装するための jQuery プラグイン (3)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事...

nginx を使用してカナリアリリースをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...

優秀なウェブ開発者が開発スキルを向上させるために知っておくべき10のこと

「開発とは、単にコードを書くだけではない」というのは、3EV の Dan Frost 氏の言葉です。...

Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作

序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...

HTML から PDF への変換事例の概要 (複数の画像を推奨)

仕事の都合上、最近 HTML を PDF に変換する機能について調べることに時間を費やしました。 H...

arcgis.js は、マップ本体の表示範囲を制御し、領域を超えた場合に自動的にバウンスするようにします (実装のアイデア)

目次背景効果アイデア背景少し前に、会社のプロジェクトで問題が発生しました。地図のベースマップ領域の範...

WeChatアプレットwebViewにH5を埋め込む方法の例

序文WeChat ミニプログラムは新しいオープン機能を提供します!ついにミニプログラムにHTMLペー...

CSSでプロセスナビゲーション効果を実現する(3つの方法)

CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip...

Vue3は独自のページングコンポーネントをカプセル化します

この記事の例では、vue3 が独自のページングコンポーネントをカプセル化する具体的なコードを参考まで...

Reactでファイルパスエイリアスを素早く設定する方法

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。F...

docker コマンド例外「権限が拒否されました」の解決方法

Linuxシステムでは、dockerを新しくインストールし、次のようなコマンドを入力します。dock...

MySql8.0バージョンに接続するMyBatisの設定問題について

mybatis を学習しているときにエラーが発生しました。エラーの内容は次のとおりです。データベース...

NODE.JS を使用して WEBSERVER を作成する手順

目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...

MySQL データベースのインデックスとトランザクション

目次1. 索引1.1 コンセプト1.2 機能1.3 索引作成の原則1.3.1 ディスクアクセス回数を...