製作出來與背景圖像

我需要一些幫助一個div的形象，我需要這個圖像代碼：製作出來與背景圖像

這是我到目前爲止有：

我嘗試添加一個邊距頂部，填充頂部，嘗試所有相對位置和絕對位置的組合，我只需要一些關於如何去做的想法。

這是我的代碼是如何構成的：

<div class="background-oficina"> 
    <div class="container"> 
    <div class="col-xs-12 text-center"> 
     <img class="logo" src="logo.png" alt="Oficina de Redação"> 
    </div> 
    </div> 
</div>

這是兩個類的CSS，我使用：

.background-oficina { 
    background: #fff url("bg-texture.png"); 
} 

.logo { 
    padding-top: 50px; 
    margin: 0 auto; 
}

來源

2017-09-15 Michael Sampietro

最新問題？ –

'position：absolute'應該可以工作，但是您必須爲父項聲明一個明確的高度，因爲子項（徽標）會從流中取出，導致父項的維度崩潰。你能至少爲你的問題創建一個MCVE嗎？我可以看到你正在使用bootstrap。 – Terry

容器元素的白色邊框底部，圖片的相同寬度的底部邊距爲負值... https://jsfiddle.net/gnvzaaho/ – CBroe

你可以使用一個額外的絕對定位的元素，其通過使用z-index: -1指定重複背景圖案和你把原始的元素背後：

html, body { 
 
margin: 0; 
 
} 
 
.background-oficina { 
 
    position: relative; 
 
    border: 1px solid #333; 
 
    border-bottom: none; 
 
} 
 

 
.bg-container { 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 0; 
 
    top; 
 
    width: 100%; 
 
    height: 120px; /* or whatever height is desired */ 
 
    background: url("http://placehold.it/20x15/cff"); 
 
} 
 

 
.text-center { 
 
    text-align: center; 
 
} 
 

 
.logo { 
 
    padding-top: 50px; 
 
    margin: 0 auto; 
 
}

<div class="background-oficina"> 
 
    <div class="bg-container"></div> 
 
    <div class="container"> 
 
    <div class="col-xs-12 text-center"> 
 
     <img class="logo" src="http://placehold.it/200x150/fb7" alt="Oficina de Redação"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-09-15 12:32:28 Johannes

它工作正常。謝謝您的回答！ :) –

您嘗試此，您可以設置默認height and width to parent div那包含logo，然後使用position:absolute您可以將其推送出父div，但不要將overflow:hidden添加到parent div，否則它會隱藏您試圖推送到父div之外的圖像或元素作爲隱藏。

.background-oficina { 
 
    background: #fff url("https://via.placeholder.com/800x100/000") no-repeat; 
 
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.2); 
 
    background-size: 100% 100%; 
 
    width: 100%; 
 
    height: 100px; 
 
    position: relative; /*Add this*/ 
 
} 
 

 
.logo { 
 
    padding-top: 50px; 
 
    margin: 0px auto; 
 
    position: absolute; /*Add this*/ 
 
    bottom: -20px; /*Add this*/ 
 
}

<div class="background-oficina padding margin-bottom"> 
 
    <div class="container"> 
 
    <div class="col-xs-12 text-center margin-bottom"> 
 
     <img class="logo" src="https://via.placeholder.com/50/ff2" alt="Oficina de Redação"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-09-15 12:24:20 frnt

製作出來與背景圖像

回答

相關問題