0

我试图在同一个 div 上使用 2 个不同的边框图像：一个图像沿顶部重复，一个沿底部重复。

我可以让底部边框图像显示。我也可以在顶部重复相同的边框图像，但是一旦我尝试使用border-bottom-image或border-top-image，都不会显示：

#mainImage{
    border-bottom:8px solid #fff;
    border-bottom-image: url("http://local.vsjf.org/wp-content/themes/vsjf/images/vsjf_borders_sage_02.png") 7 repeat;
    border-top:8px solid transparent;
    border-top-image: url("http://local.vsjf.org/wp-content/themes/vsjf/images/vsjf_borders_white.png") 7 repeat;
    border-left:0px;
    border-right:0px;
}

这可能吗？

4

1 回答 1

0

我从来没有使用过边框图像，我想有一些标签很少用于 CSS。

我认为可能会产生您想要的结果的一个很好的选择是使用 :before 和 :after 样式，它们可以比边框图像更灵活，因为您可以将 :before 和 :after 几乎定义为单独的元素，但是它们是元素的一部分，默认情况下使其相对。

#mainImage:before {background-image: url('/*url*/'); width: #px; height: #px; position: /*relative*/; content:''; }
#mainImage:after {background-image: url('/*url*/'); width: #px; height: #px; position: /*relative*/; content:'';}
于 2017-11-18T17:04:34.883 回答