ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで画像を重ねる方法
CSSで画像を重ねる方法
- 青灯夜游オリジナル
- 2021-07-27 17:11:1910003ブラウズ
CSS で画像を重ねる方法: まず、絶対位置を設定するために「position:Absolute;」スタイルを画像に追加し、次に margin-left 属性と margin-top 属性を使用して画像の位置を設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS を使用して 2 つの画像をオーバーレイする画像のオーバーレイ効果は、position 属性、margin-left および margin-top 属性によって設定できます。
コード例:
CSS を使用して画像のオーバーラップを実装する最初の画像の上にマウスを置くと、2 番目の画像が表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片重叠</title>
<style>
ul li {
position: relative;
float: left;
}
ul li #play {
position: absolute;
width: 150px;
height: 100px;
margin-top: 85px;
margin-left: 78px;
display: none;
}
ul li #yuan {
position: absolute;
width: 300px;
height: 300px;
margin-left: 0px;
margin-top: 0px;
}
ul li #yuan:hover +#play {
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<!-- <img id="play" src="img/ia_100000164.jpg" alt="CSSで画像を重ねる方法" > -->
<img id="yuan" src="img/ia_100000165.jpg" alt="CSSで画像を重ねる方法" >
<!-- 放在下面，反而显示在上面 -->
<img id="play" src="img/ia_100000164.jpg" alt="CSSで画像を重ねる方法" >
</li>
</ul>
</body>
</html>レンダリング:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで画像を重ねる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。