CSS - 容器邊緣的動態填充

快速問題在這裏。我使用一個數據庫，並在圖像的頂部插入一個「映像名稱」，因爲在這裏可以看到：CSS - 容器邊緣的動態填充

目前的圖片名稱的填充是一個數字，但是我想填充直到圖像的邊界。我嘗試過'填充：正確的250'，但是很明顯，這將不起作用，因爲正確的填充從圖像名稱的末尾開始，可以是不同的長度。

這讓我開始認爲它需要動態，而且我確實對此很陌生。我在網上查看了各種各樣的東西，但似乎無法找到類似的東西，這可能意味着我正在尋找錯誤的東西。無論如何，任何幫助都會很棒。

乾杯，

傑克

**當前CSS（當然其它更多的存在，但這requried位） - **

h3.imageName { 
    position: absolute; top: 278px; left: 10; 
    width: 100%; 
    z-index: 20; 
} 

h3.imageName span { 
    color: white; 
    font: bold 18px Helvetica, Sans-Serif; 
    background: rgba(0, 0, 0, 0.7); 
    padding: 8; 
}

**當前HTML - **

<h3 class="imageName"><span><?php echo $row['name']; ?></span></h3>

來源

2016-02-23 Jacob Ryde

你真的想達到什麼目的？如果要將'span'元素擴展到圖像的邊界，您可以設置'width'的樣式嗎？ –

如果圖像容器寬度沒有改變，您可以給整個文本區域一個寬度。在這種情況下，請考慮使用bottom: 0;而不是top:#。

來源

2016-02-23 12:43:53

這並不完全清楚這是如何構造的，但絕對定位的元素根據最接近的非靜態定位的祖先的邊緣進行定位。

不幸的是，這個包括邊框和填充。

一種選擇將他們包裹圖像中的另一個元素，並應用邊界是：

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 
body { 
 
    text-align: center; 
 
} 
 
.wrap { 
 
    margin: 1em; 
 
    display: inline-block; 
 
} 
 
.inner { 
 
    position: relative; 
 
    border: 10px solid pink; 
 
} 
 
img { 
 
    display: block; 
 
} 
 
.imageName { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    z-index: 2; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 
h3.imageName span { 
 
    color: white; 
 
    font: bold 18px Helvetica, Sans-Serif; 
 
}

<div class="wrap"> 
 
    <div class="inner"> 
 
    <img src="http://lorempixel.com/400/200/sports/" alt="" /> 
 
    <h3 class="imageName"><span>Image Title</span></h3> 
 
    </div> 
 
</div>

作爲替代邊境......一箱陰影可能是因爲這不會影響元素的大小。

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 
body { 
 
    text-align: center; 
 
} 
 
.wrap { 
 
    margin: 1em; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
img { 
 
    display: block; 
 
    box-shadow: 0 0 0 10px pink; 
 
} 
 
.imageName { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    z-index: 2; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 
h3.imageName span { 
 
    color: white; 
 
    font: bold 18px Helvetica, Sans-Serif; 
 
}

<div class="wrap"> 
 

 
    <img src="http://lorempixel.com/400/200/sports/" alt="" /> 
 
    <h3 class="imageName"><span>Image Title</span></h3> 
 

 
</div>

來源

2016-02-23 12:48:35

您使用的跨度是一個display:inline;元素，這意味着它的寬度是不能自動或100％。您已向背景添加了背景顏色，這意味着背景不會伸展到父元素的邊緣。將您的背景放在父母上，即您的h3元素。您已經使用了width:100%;，如果你想在左下角，你應該試試這個：

h3{position:absolute;left:0;right:0;bottom:0;background:#000000;background:rgba(0,0,0,0.7);}

而且我看到你添加填充，並且10px的位置。所以，你可以使用保證金像這樣

margin:0px 10px;

這會從父元素兩側送花兒給人保持h3元素10px的。

保持距離底部10px。添加bottom:10px;或甚至以保持一致。

此外，我們並不真的需要任何樣式的跨度本身，因爲它是h3的子元素。所以，只要把你的風格從h3跨度所以一起

h3{position:absolute;left:0;right:0;bottom:0px;margin:10px;marign-top:0px;background:#000000;background:rgba(0,0,0,0.7);color:#FFFFFF;font-family:Helvetica,Sans-Serif;padding:8px;}

另外！不要忘記添加一個相對於h3的父元素的位置！

`position:relative;`

來源

2016-02-23 12:57:51 sourRaspberri

CSS - 容器邊緣的動態填充

回答

相關問題