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：扩展的图像

回答

相关问题