Question

我有一个div，我正试图让边框重复一个图像。图像出现在div的所有四个角落中，但不会重复。有人可以帮忙吗？

HTML ：

<div id="main" class="area"></div>

CSS ：

.area {
    position:absolute;
    top: 10%;
    left: 11%;
    width: 75px;
    height: 595px;
    border: solid;

    background-color:white;
    border:30px solid transparent;
    -webkit-border-image: url('media/playerAreaBorder.png');
    -webkit-border-image-repeat: repeat;

    vertical-align: middle;
    text-align: center;
    z-index: 5;
}

Answer 1

http://jsfiddle.net/LejjD/4/

.area {
    position:absolute;
    top: 10%;
    left: 11%;
    width: 75px;
    height: 595px;
    background-color:white;
    border-style: solid;
    border-width: 30px;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 repeat;       
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 repeat; 
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 repeat; 
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 fill repeat;
    vertical-align: middle;
    text-align: center;
    z-index: 5;
}

Answer 2

Sigma的答案是正确的，但您可能想看看使用border-image-slice。它将按原样保留角落，仅拉伸边框图像的中间位置：

border-image-slice: 20 20 20 20;

您必须在那里调整20秒以匹配您的图像。它基本上将图像切割成9个区域并拉伸非角落图像。更多信息：

http://css-tricks.com/understanding-border-image/

http://www.w3schools.com/cssref/css3_pr_border-image-slice.asp

Answer 3

对于所有前缀，例如moz，webkit和o：

，都是如此

一旦标准化，并添加了对未加前缀的变体的支持，删除了前缀属性。

您仍然可以将它们与旧浏览器版本兼容，但现在大多数浏览器都能正确支持CSS3。

另外，请确保您的css文件和媒体文件夹位于同一文件夹中，否则您的网址路径错误。

CSS边框图像重复不起作用

3 个答案: