已经为此工作了好几天,但似乎无法解决。
我有这个:
<div class="outer-border">
<div class="grid-layout">
<div class="grid"></div>
</div>
</div>
对于outer-border
,我有一个罗马风格的边框,上下各 60 px,左右各 100 px。
我想给 grid-layout
添加一个背景图片,让它覆盖内容部分和部分边框。
无论如何,对于这种情况,是否可以正确定位背景图像? 现在我得到:
在我使用 background-size: cover;
的地方,它垂直工作而不是水平工作,并且没有响应。
我的CSS:
.outer-border {
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-image: url($outer_no_top) 23% 15% 23% 15% repeat;
background-image: url("theme/matrix-marble.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: right
}
现在背景只是一个.jpg,但我尝试了不同的格式,但仍然无法处理定位。
通过将它作为 grid-layout
的背景,我让它以一种很好的方式工作,然后我必须使用定位、z-index 和负边距将它放在边界。这导致 grid
内的链接变得不可点击。
现在完全卡住了,有什么线索吗?
/大卫
更新
JsFiddle: https://jsfiddle.net/bcn42gvm/1/
最佳答案
关于html - CSS:带边框的背景图像定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31634920/