HTML/CSS將文字放在圖像上而不溢出？

我已經放在我的網站一些文字上的圖像的頂部，它看起來像這樣：HTML/CSS將文字放在圖像上而不溢出？

現在我希望它看起來像這樣：

所以，切斷「y」的下半部分。我目前的HTML/CSS是：

.header { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
} 
 
.header img { 
 
    width: 100%; 
 
    background-color: #575757; 
 
    box-shadow: 0.000em 0.188em 0.188em #999999; 
 
    position: relative; 
 
    left: 0; 
 
} 
 
.header span { 
 
    font-size: 4.938em; 
 
    color: #f8f8f8; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    margin: 0; 
 
    text-shadow: 0 0 0.05em #999999; 
 
    /*place it over heading image*/ 
 
    vertical-align: baseline; 
 
    position: relative; 
 
    top: 0; 
 
    width: 0; 
 
    display: inline-block; 
 
    overflow: visible; 
 
    z-index: 100; 
 
}

<div class="header"> 
 
    <span>Systems</span><!-- no whitespace 
 
    --><img src="http://lorempixel.com/400/100/" /> 
 
</div>

我怎樣才能使這樣的圖像之外的任何文本切斷？

來源

2016-02-29 The Oddler

使用溢出：隱藏，並給一些固定的高度.header類。然後把高度：100％的圖像，即.header img – yogihosting

這個https://jsfiddle.net/Lg0wyt9u/107/怎麼樣？ –

將這項工作的嗎？

.header { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.header img { 
 
    width: 100%; 
 
    background-color: #575757; 
 
    box-shadow: 0.000em 0.188em 0.188em #999999; 
 
    position: relative; 
 
    left: 0; 
 
} 
 
.header span { 
 
    font-size: 4.938em; 
 
    color: #f8f8f8; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    text-shadow: 0 0 0.05em #999999; 
 
    position: absolute; 
 
    height: 75px; 
 
    bottom: 4px; 
 
    width: 100%; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    z-index: 100; 
 
}

<div class="header"> 
 
    <span>Systems</span><!-- no whitespace 
 
    --><img src="http://lorempixel.com/400/100/" /> 
 
</div>

來源

2016-02-29 19:14:14 LGSon

這似乎對一個圖像很好，但是我爲我的範圍設置了「頂部」值，所以設置「底部」到4不起作用但是，通過簡單地固定文本的高度，它看起來像我在某處：P –

@TheOddler是的，我的意思是使用'position：absolute'來控制'span'的位置，溢出等，所以它可以定位在圖像上 – LGSon

什麼似乎工作，並且很容易，只是將我的文本的高度固定爲0，留下溢出到「可見」，並移動陰影從圖像到頭文件類，這不是你的答案，但它確實讓我在那裏：D我應該接受你自己還是自己創建一個答案？ –

使用overflow:hidden類header

來源

2016-02-29 17:32:25

我剛剛嘗試過，但它似乎沒有工作。這裏有一個jsfiddle它：https://jsfiddle.net/rj9utgv0/ –

你也必須爲頭類設置高度。 – yogihosting

我得到了這個問題，因爲你的'position'屬性產生了問題 –

-1

.header span 

{ 

overflow:hidden; 

}

來源

2016-02-29 17:39:07

是你需要什麼？ DEMO

.header { 
 
    width: 100%; 
 
    height: 160px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
.header img { 
 
    width: 100%; 
 
    background-color: #575757; 
 
    box-shadow: 0.000em 0.188em 0.188em #999999; 
 
    position: relative; 
 
    left: 0; 
 
} 
 
.header span { 
 
    font-size: 4.938em; 
 
    color: #f8f8f8; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    margin: 0; 
 
    text-shadow: 0 0 0.05em #999999; 
 
    /*place it over heading image*/ 
 
    vertical-align: baseline; 
 
    position: relative; 
 
    top: 0; 
 
    width: 0; 
 
    display: inline-block; 
 
    z-index: 1; 
 
}

<div class="header"> 
 
    <span>Systems</span> 
 
    <!-- no whitespace--> 
 
    <img src="http://lorempixel.com/400/100/" /> 
 
</div>

來源

2016-02-29 17:41:06 Microsmsm

幾乎，除了陰影也消失了，我的身高可能不同（我有這些圖像的多個與他們在底部的文字）。 –

現在呢？ @ TheOddler https://jsfiddle.net/fL2dtc5g/1/ – Microsmsm

嗯，差不多呃。只有它應該被切斷一點點高。沒有超過影子。（我嘗試過影子的陰影，但是在圖像下仍然有一點額外的白色，然後:(） –

HTML/CSS將文字放在圖像上而不溢出？

回答

相關問題