我在使用页面上的图像实现页面边框时遇到了困难。边框应该贴在我的网页的两侧，但图像没有显示。然而，用纯色背景颜色替换图像确实有效。我正在使用下面的代码:
#top, #bottom, #left, #right {
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 15px;
}
#left {
left: 0;
background-image: url("border-left.png");
}
#right {
right: 0;
background-image: url("border-right.png");
}
#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top {
top: 0;
background-image: url("border-top.png");
}
#bottom {
bottom: 0;
background-image: url("border-bottom.png");
}
@media
only screen and (max-width: 500px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{
#top, #bottom, #left, #right { display: none; }
}
正如我所说，将 background-image: url("border-left.png"); 替换为 ``background: #000;工作得很好。
有人知道如何解决图片显示不正确的问题吗？
至于 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Borders -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="wrapper" class="toggled">
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<p>Content</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</body>
</html>
显示了顶部和左侧的图像(但不正确)，底部和右侧的图像完全被忽略了。
最佳答案
使用浏览器的开发人员工具会发现元素(#right 等)没有高度或没有宽度。这些需要进行配置，以便显示元素的背景。
例如，一个 block 级元素，如 div，默认情况下会在浏览器宽度上拉伸(stretch)，但如果没有任何内容，高度将为零。
关于html - 使用 CSS 的页面图像边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48063892/