2017-02-25 1 views
-1

我試圖在響應式圖像上顯示播放按鈕。按鈕有96x96像素,需要在圖像的中心。使用css播放響應式圖像上的按鈕

我嘗試了很多方法,但總是很糟糕。我讀了一些關於柔性設計的內容,也許在flex中很簡單?

我需要非常簡單的方法,因爲會有5到10個元素。

感謝和問候

回答

0

如果要給圖像的父元素,可以使覆蓋在父的中心母公司和其位置的背景圖像。

div { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
div:after { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    width: 96px; 
 
    height: 96px; 
 
    background: url('https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg'); 
 
    background-size: cover; 
 
    content: ''; 
 
}
<div> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
</div>

這裏是相同的技術,但隨着覆蓋在父的img

div { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
.thumb { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    width: 96px; 
 
    height: 96px; 
 
}
<div> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <img src="https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg" class="thumb"> 
 
</div>

+0

真是最好的!非常感謝你,我的朋友! :) – Delavor

1

把你的圖像轉換成相對的容器,和您的播放鍵爲絕對的。 Somethinkg這樣的:

<div class="videoContainer"> 
    <img src="link_to_your_image" alt=""> 
    <img src="link_to_play_button" alt="play" class="playBtn"> 
</div> 

和CSS:

.videoContainer { 
    position: relative; 
} 
.playBtn { 
    position: absolute; 
    width: 96px; 
    height: 96px; 
    left: 50%; 
    top: 50%; 
    margin-left: -48px; /*half of the width */ 
    margin-top: -48px; /*half of the height */ 
} 
+0

如果你可以提供一個小提琴鏈接或摘錄鏈接,它也是很好的現實狀態。 –