css - CSS：扩展图像

Question

我有一个看起来像这样的图像：

是否可以扩展此图像（可能在 div 内），使其看起来像这样：

谢谢！

Answer 1

获取宽度为：1px 的箭头左上角灰色部分的垂直切片。获取一个 px 切片图像并在 -x 上重复它。

这是你可以练习的东西

由于您的图像没有渐变，因此您更有可能仅使用背景颜色来匹配所需的颜色。

Answer 2

您可以将其设置为 div 的背景

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

只需确保背景颜色与 gif 上的深灰色相同即可

Answer 3

您可以使用 CSS 属性创建一个相同颜色的 div background-color（我相信十六进制应该是 ~ #999）。然后，使用该属性将图像定位为background-imagediv 中的a。background-position: right

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/

Answer 4

不，这在 CSS 中是不可能的。您必须设置包含元素的宽度，设置背景图像的 url 并将 x 位置设置为右并将重复设置为不重复。然后将背景颜色设置为与按钮的前景色相同。如果按钮前景是图案，则必须使用另一个图像作为背景。

Answer 5

不，至少不是那个图像:-)

看起来你可以使用“滑动门”技术——有关它的好文章，请参见http://www.alistapart.com/articles/slidingdoors/