Imej Overlay Main Butang Menggunakan CSS

Artikel ini meneroka teknik -teknik untuk memusatkan imej butang main ke imej lain menggunakan CSS. Beberapa pendekatan dibentangkan, masing -masing dengan pelbagai tahap keserasian penyemak imbas.

kaedah yang paling berkesan

Pendekatan ini memberikan hasil yang sangat baik di seluruh pelayar moden dan juga berfungsi dengan baik dengan versi IE8 dan kemudian. Anda boleh mencari contoh kerja di jsfiddle.net/sdsj9/1/ (pautan yang disediakan dalam teks asal).

Percubaan sebelumnya

Beberapa percubaan terdahulu didokumenkan, masing-masing dengan kekuatan dan kelemahannya sendiri mengenai keserasian penyemak imbas. Ini boleh didapati di jsfiddle.net/yaukb/1/ dan jsfiddle.net/yaukb/6/ (pautan dari asal).

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;
}

Salin selepas log masuk

(contoh)

ingat untuk menggantikan

dengan laluan sebenar ke imej anda. Penambahbaikan utama dalam CSS yang disemak ini menggunakan

<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>

dan> untuk memusatkan tepat di dalam bekas. Hartanah "your-image.jpg" juga ditambahkan ke elemen position: absolute; untuk kawalan yang lebih baik ke atas saiz butang. transform: translate(-50%, -50%); width Contoh yang lebih baik ini menangani isu berpusat dengan lebih berkesan dan menyediakan penyelesaian yang lebih mantap untuk membuat overlay butang bermain. Soalan Lazim dari teks asal tetap relevan dan memberikan maklumat tambahan yang berharga. #play

Atas ialah kandungan terperinci Imej Overlay Main Butang Menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!