好吧,我对 div、元素 (?) 的“高级”定位有疑问,无论其他 div 等等如何。我真的只是不确定如何将对象置于其他对象的中心。我尝试过使用多种方法,阅读此处的回复并查找所有教程,但我似乎无法理解。 :/
这是我最近一次尝试将一张图片居中并叠加在另一张图片上。
<body>
<div class="container-fluid">
<img class="img-responsive" src="file:///E:/HTML_CODE/HexStars.png" alt="HexStars" style="position:relative;">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"><img class="img-responsive" src="file:///E:/HTML_CODE/HexLogo.png" alt="HexStars"></div>
<div class="col-sm-4"></div>
</div>
</div>
</body>
完成此任务时,我最初的想法是只使用背景图像,而不必费心将一个叠加在另一个之上,因为我认为考虑到它在背景中,它只会忽略背景图像。
在我在那里尝试失败后,我只是尝试使用流体容器将 img 的“背景”图像设置为相对图像,将后者设置为绝对图像,但也没有运气。
10 次中有 9 次我试图覆盖的照片只是位于我试图让背后冷静下来的照片下方。
抱歉发了这么长的帖子,我只是希望有人可以帮助解释如何重新排列图像,因为我不确定人们如何神奇地知道像素坐标并可以快速布置 img map 。
不管怎样,我有一段时间没睡了,我可能语无伦次。提前致谢。
编辑:
为什么这行不通????
body {
background-color: #1a1a1a;
background-image: file:///E:/HTML_CODE/HexStars.png("HexStars");
background-repeat: no-repeat;
background-attachment: fixed;
}
我太笨了,我想出了如何使用 css 背景图像,但我仍然对问题的上半部分感到困惑。
最佳答案
After My attempt failed there I just tried using a fluid container for both img's setting the 'background' image as relative and the latter to absolute with no luck there either.
反过来试试这个。 position: absolute
将图像从 DOM 流中分离出来,从而可以在其之上放置其他元素。您希望在背景 img 容器上使用 position:absolute
,在顶部图像上使用 position:relative
。
Why doesnt this work????
body { background-color: #1a1a1a; background-image: file:///E:/HTML_CODE/HexStars.png("HexStars"); background-repeat: no-repeat; background-attachment: fixed; }
背景图像值看起来格式不正确。它应该看起来更像这样:
background-image: url("paper.gif");
或者举个例子,你提供了这样的东西:background-image: url("file:///E:/HTML_CODE/HexStars.png");
关于html - 无法将图像放置在背景图像上(Html、Bootstrap、CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39625428/