相對於背景圖像定位圖像

CSS樣式新手。我的網頁上有一個響應式背景圖片，我想要在其底部中心放置一個圓形徽標。無論視圖有多小/多大，我都希望此圖像保持在相同的位置（相對於背景圖像的底部）。相對於背景圖像定位圖像

我一直在玩圖像填充和定位，但都沒有響應。當屏幕較小時，圖像向上移動。當它變大時，圖像向下移動。我希望它保持在同一個位置。

這是我最近一次嘗試的快速小提琴：

，代碼：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="splash col-sm-12"> 
     <div class="photo"> 
     <img class="img-responsive img-circle logo" src="http://i.imgur.com/Dum5A8J.png"> 
     </div> 
    </div> 
    </div> 
</div> 

.logo { 
    padding-top: 200px; 
    width: 10%; 
    margin: 0 auto; 
    display: block; 
} 

.splash { 
    background: url('http://s169923.gridserver.com/images/IntelligentsiaMocha.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 50vh; 
    background-color: rgba(0, 0, 0, 0.2); 
    background-blend-mode: overlay; 
}

來源

2016-02-25 mdegges

如果我理解正確，你想要一個.photo總是在.splash的中心。爲此，您應該使用Flex-box。

添加以下代碼：

.parentDiv{ 
    display: flex; 
    justify-content: center; 
    align-items: center: 
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ......以供參考。

來源

2016-02-25 23:07:50

你可能想它絕對定位的主圖像DIV中。以下是您的JSFiddle的修改版本：https://jsfiddle.net/jameson5555/ybeuvn9m/1/

以下是更新的.logo樣式。您還需要將position: relative添加到您的容器中，以使.logo的位置與其相關。

.logo { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 40px; 
    margin-left: -20px; 
    display: block; 
}

來源

2016-02-25 22:53:44 jameson

謝謝，這看起來不錯。我仍然遇到了一件事情：在背景圖片上使徽標成爲一半，並在其下面留下一半空白。 – mdegges

我更新了小提琴：https：//jsfiddle.net/jameson5555/ybeuvn9m/4/ – jameson

.logo { 
     padding-top: 150px; 
     width: 110px; 
     margin: 0 auto; 
     display: block; 
     }

您的徽標應該有恆定的徽標寬度。

來源

2016-02-25 23:11:52 user2320601

相對於背景圖像定位圖像

回答

相關問題