CSS：擴展的圖像

我有一個看起來像這樣的圖像： My image CSS：擴展的圖像

是否有可能延長這一形象（也許是一個div裏面），這樣它看起來是這樣的： enter image description here

謝謝！

2012-07-18 mpmp

使用'背景color'。 – Blender 2012-07-18 16:43:06

jsbin.com/ezisef/ – j08691 2012-07-18 16:48:41

您可以創建相同科洛科洛的一個div r使用CSS background-color屬性（我相信十六進制應該是〜#999）。然後，使用background-position: right屬性將圖像放置在div內的background-image。

HTML

<div class="arrow">Home</div>

CSS

#arrow { 
    background-color: #999; 
    background-image: url('http://i.stack.imgur.com/QDCz4.png'); 
    background-position: right; 
    background-repeat: no-repeat; 

    /* sets div dimensions/text styles */ 
    height: 24px; 
    color: white; 
    text-align: center; 
    line-height: 24px; 
    float: left; 

    padding-left: 20px; 
    padding-right: 30px; /* slightly longer to account for background image /* 
}

JS小提琴：http://jsfiddle.net/fbBsz/14/

來源

2012-07-18 16:48:36 JSW189

這是唯一對我有效的完美的，但是，我想動態設置div的寬度和高度，因爲我會在裏面放置隨機文本。 – mpmp 2012-07-18 17:11:43

我更新了我的答案。只需在'div.arrow'上使用'float：left;'然後向左側和右側添加填充。您可能想在右側填充一點以考慮箭頭圖像。 – JSW189 2012-07-18 17:22:16

太棒了！爲什麼我沒有想到這一點。簡單，但天才。謝謝！ – mpmp 2012-07-18 17:23:41

獲取箭頭最左上方灰色部分的垂直切片，寬度爲1px。取一個px切片圖像並在-x上重複。

這裏是你可以practice with

因爲你的形象沒有梯度，你有想只用背景色，（一個或多個）匹配的更好的機會什麼的。

來源

2012-07-18 16:44:39 ODelibalta

這就是我實際上在想的，但我不知道該怎麼做。代碼示例或許？ – mpmp 2012-07-18 17:09:44

你看過鏈接嗎？使用背景圖像並使用重複-x。 – ODelibalta 2012-07-18 17:56:22

不，這在CSS中不可行。您必須設置包含元素的寬度，設置背景圖片的url並將x位置設置爲右側，並將重複設置爲不重複。然後將背景顏色設置爲與按鈕的前景顏色相同。如果按鈕前景是一個模式，則必須使用另一個圖像作爲背景。

來源

2012-07-18 16:44:44

爲什麼你說這是不可能在CSS（它是），然後解釋如何做到這一點？ – j08691 2012-07-18 16:48:10

我正在解釋一個替代解決方案。 – 2012-07-18 18:11:32

可以將其設置爲背景，以一個div

#elem { 
display:block; 
width:200px; 
height:20x; 
background: url(/filepath/to/image.gif) right top no-repeat #ccc; 
}

只要確保背景顏色相同的gif

來源

2012-07-18 16:45:15 Ollie

無論如何動態設置寬度和高度？ – mpmp 2012-07-18 17:08:26

不，不是與圖像至少深灰色： - ）

看起來你可以利用的「滑動門」技術 - 看http://www.alistapart.com/articles/slidingdoors/關於它的好文章

來源

2012-07-18 16:45:49 giorgiga

是的，這是相當可行的。 jsbin.com/ezisef/ – j08691 2012-07-18 16:48:57

這只是因爲示例圖像平坦且不透明（當然，如果這是_actual_圖像，那麼依靠元素背景可能是好的） – giorgiga 2012-07-18 17:05:34

CSS：擴展的圖像

回答

相關問題