2

我想实现这样的目标：

例子

元素的宽度为 100%。我将只使用居中的角并与边框顶部结合：

.element { 
border-top: solid 1px #ccc ; 
background: url('../images/arrow.png') no-repeat center top; 
}

但边界留在箭头内。我试图up image background -1px隐藏边框，但没有奏效。我该怎么做呢？

4

4 回答 4

3

我用一个额外的容器解决了它：

HTML：

<div class="first"><div class="second"></div></div>​

CSS：

.first {
    border-bottom: 5px solid #000;
    width:100px;
    height:100px;
    background-size: 20%;
    background-position:50% 105%;
    box-sizing: border-box;
}

.second {
    width:100%;
    height:104px;
    background: url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcROusF7rh7H4mWpr8wQIllxWPAHHIShRyG62xp3qy2O4Av_NmNV) no-repeat;
    background-size: 20%;
    background-position:50% 100%;
}
​

jsfiddle：http: //jsfiddle.net/AKpLT/

于 2012-08-18T15:10:52.843 回答
0

如果您已经在创建图像，只需将整个图像制作成您想要的形状即可。让它足够长，以便它可以调整到您可能想要放入的任何合理长度元素。

于 2012-08-18T15:03:54.433 回答
0

有趣的问题。这是一个人为的解决方案，使用:before选择器将图像绝对定位在边框上。有关工作示例，请参阅此 jsfiddle 。相关代码如下：

div {
    border: 1px solid red; /* For demo purposes it's red */
    position: relative;
}

div:before {
    content: url('http://i.stack.imgur.com/P3zMs.png');
    position: absolute;
    top: -1px;
    width: 100%;
    text-align: center;
    line-height: 1px;
}

这是结果的屏幕截图：

上述代码的结果

编辑：选择器的浏览器兼容性:before告诉我们它仅在 IE8 及更高版本中受支持。更糟糕的是，因为据我所知，即使在 IE9 中，伪元素的content: url(...)构造和background-image:before 似乎也不起作用。幸运的是，这应该属于优雅的贬低...

于 2012-08-18T15:37:14.950 回答
0

像 Mash 我会使用另一个元素作为背景，但与 Mask 不同的是我会使用 CSS :before 或 :after 伪元素：

<h2>Heading</h2>

h2 {
    border-top: 1px solid #ccc;
    position: relative;
}

h2:after {
    background: url(IMAGE);
    content: " ";
    display: block;
    width: WIDTH-OF-IMAGE;
    height: HEIGHT-OF-IMAGE;
    position: absolute;
    left: 50%;
    top: -1px;
    margin-left: -WIDTH-OF-IMAGE/2;
}
于 2012-08-18T16:09:14.810 回答