CSSを使用してボタンオーバーレイ画像を再生します-jsチュートリアル-php.cn

CSSを使用してボタンオーバーレイ画像を再生します

Joseph Gordon-Levitt

リリース： 2025-02-24 10:36:11

オリジナル

880 人が閲覧しました

この記事では、CSSを使用して別のイメージに再生ボタン画像を中央にオーバーレイするための手法について説明します。いくつかのアプローチが提示されており、それぞれがブラウザの互換性の程度がさまざまです。

Play button overlay image using CSS 最も効果的な方法

このアプローチは、最新のブラウザ全体で優れた結果を提供し、IE8以降のバージョンでもうまく機能します。 jsfiddle.net/sdsj9/1/で作業例を見つけることができます（元のテキストで提供されているリンク）。

以前の試み

いくつかの以前の試みが文書化されており、それぞれがクロスブラウザーの互換性に関する独自の長所と短所を備えています。これらはjsfiddle.net/yaukb/1/およびjsfiddle.net/yaukb/6/にあります（オリジナルからのリンク）。

css

html

（例）

#container {
    position: relative;
    display: inline-block;
    border: 1px solid green; /* For demonstration purposes */
}

#container * {
    box-sizing: border-box; /* For consistent box model across browsers */
}

#image {
    z-index: 9;
    text-align: center;
    border: 1px solid blue; /* For demonstration purposes */
}

#play {
    background: url('https://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
    position: absolute; /* Crucial for overlaying */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the button */
    height: 140px;
    width: 140px; /* Added for better control */
    z-index: 10;
}

ログイン後にコピー

を画像への実際のパスに置き換えることを忘れないでください。この改訂されたCSSの重要な改善は、容器内の正確なセンタリングに

および

<div id="container">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174036457919668.jpg"  class="lazy" alt="Play button overlay image using CSS " />
  <div id="play"></div>
</div>

ログイン後にコピー

を使用することです。

プロパティは、ボタンのサイズをより適切に制御するために"your-image.jpg"要素にも追加されます。 position: absolute;この改良された例は、センタリングの問題にもっと効果的に対処し、再生ボタンオーバーレイを作成するためのより堅牢なソリューションを提供します。元のテキストのFAQは関連性があり、貴重な補足情報を提供します。

以上がCSSを使用してボタンオーバーレイ画像を再生しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。