我正在尝试创建一个由图像组成的边框,每边一个,四个不同的,每个 Angular 一个。结果并不如预期。边框的左侧和右侧与顶部和底部重叠。此外, Angular 落不可见,因为它们被侧面覆盖。以下是我到目前为止的代码。
<div class="book-border" style="margin: 5%">
<div class="book-top"
style=" margin: 1%; background: url(style/border_br.png) bottom right no-repeat,
url(style/border_bl.png) bottom left no-repeat,
url(style/border_tr.png) top right no-repeat,
url(style/border_tl.png) 0 0 no-repeat,
url(style/border_right.png) top right repeat-y,
url(style/border_left.png) top left repeat-y,
url(style/border_bottom.png) bottom left repeat-x,
url(style/border_top.png) 0 0 repeat-x;">
<h2>New Books</h2>
//Some HTML code
</div>
</div>
我如何才能获得一个清晰的边界,使 Angular 落可见并且不会与其余部分重叠?
更新:
我有一个包含背景样式的新 CSS 文件,但仍然无法实现我想要的效果。
<div class="book-category" id="newbooks">
<h2>New Books</h2>
</div>
//CSS
div.book-category{
margin:10px;
padding:10px;
background: url("style/border_tl.png") 0 0 no-repeat,
url("style/border_left.png") 0 0 repeat-y,
url("style/border_right.png") top right repeat-y,
url("style/border_top.png") 0 0 repeat-x,
url("style/border_bottom.png") bottom left repeat-x;
}
结果是
最佳答案
也许是显而易见的,但你可以只使用 CSS 边框吗?
.book-top { border: 1px solid black; }
如果您需要基于图像的 broders,那么我会将您的所有图像合并到一个背景图像中,并为该元素提供一些填充,以便您可以在边缘看到背景图像。
多个背景图像通常不会按预期工作并且非常难以使用。
关于html - 侧面图像与框架的顶部图像重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16318548/