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

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

最も効果的な方法

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

以前の試み

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

css

html

（例）

<code class="language-css">#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;
}</code>

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

および

<code class="language-html"><div id="container">
  <img src="/static/imghwm/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></code>

を使用することです。

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

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