如何在div背景上應用最小寬度？

<div style="background: url(http://netdna.webdesignerdepot.com/uploads/2013/11/picjumbo.com_IMG_3130.jpg) no-repeat center center; 
 
    background-size: 100%; min-width: 700px; height: 100%; width: auto;"> 
 

 
    <p> 
 
    I DO NOT WANT THIS CONTENT TO BE AFFECTED BY THE MIN-WIDTH. I just want the background to take on min-width. I hope that makes sense.</p> 
 

 
</div>

這裏是我的小提琴：

https://jsfiddle.net/y0bdLgzL/2/

我申請在線的造型，因爲這個特殊的項目，我需要能夠動態生成背景基於數據庫的圖像。
我想讓背景採取最小寬度屬性，但不是內容/文本。

任何關於如何正確安排div和課程以幫助實現此目的的幫助將非常有幫助。

來源

2016-10-27 Brian Breeden

什麼是你的目標，總是能有充分的寬度是多少？我不認爲有一個簡潔的方法可以將最小寬度設置爲背景圖像，因爲它是元素的一部分。一種方式：使用：之前與位置：絕對有更多的控制或這些技巧的東西：http://stackoverflow.com/questions/16679221/how-to-set-a-minimum-width-with-background-size – degers

是的，它的寬度總是被覆蓋，直到某個點，然後它不再擴展。問題是，超過圖像頂部的文字會隨之縮放。我不想那樣。 :( –

請參閱我上面的提議，但最簡單的方法是爲文本寬度添加一個子元素max-width。 – degers

既然你不能給背景圖像一個最小寬度，你可以使用僞元素，就像這樣。

Updated fiddle

.bkg { 
 
    position: relative; 
 
    height: 100%; 
 
    width: auto; 
 
} 
 
.bkg::before { 
 
    content: ''; 
 
    position: absolute; 
 
    background: url(http://netdna.webdesignerdepot.com/uploads/2013/11/picjumbo.com_IMG_3130.jpg) no-repeat center center; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    min-width: 700px; 
 
    height: 100%; 
 
} 
 
.bkg p { 
 
    position: relative; 
 
}

<div class="bkg"> 
 

 
    <p> 
 
     I DO NOT WANT THIS CONTENT TO BE AFFECTED BY THE MIN-WIDTH. I just want the background to take on min-width, not the content. I hope that makes sense.</p> 
 

 
    </div>

來源

2016-10-27 17:47:48 LGSon

無論出於何種原因，它工作得很好，但我可以從字面上複製並粘貼到一個HTML/CSS文件和背景並不出現。 –

@BrianBreeden然後發佈該HTML/CSS代碼，我會看看 – LGSon

這是小提琴：https://jsfiddle.net/zhLcskuo/這真是令人沮喪。我的本地文件，字面上（加上等完全一樣，我可以改變圖像整天，但它並沒有出現。> =（ –

你可以通過使用::before僞元素，像這樣實現這一結果：

<div class="wrapper"> 
    <p> 
     Lorem ipsum solor dit amet 
    </p> 
</div> 

.wrapper { height: 100%; position: relative; width: auto; } 
.wrapper::before { background: url('img/bg.png') 0 0/100% 100% cover; content: ''; min-width: 700px; left: 0; position: absolute; top: 0; }

大小的.wrapper::before和背景將遵循！

來源

2016-10-27 17:42:16 giorgio

我正要刪除我的答案我看到你寫了一篇，而我寫了我的，但由於你的工作不正常，我會離開我的。 – LGSon

爲什麼它不工作？ – giorgio

我需要回答這個?? ...做一個樣片或小提琴，並檢查自己 – LGSon

如何在div背景上應用最小寬度？

回答

相關問題