html - 无法将图像放置在背景图像上(Html、Bootstrap、CSS)

标签 html css

好吧,我对 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/

相关文章:

html - 多个 <nav> 标签

javascript - jQuery Slice 调整大小函数

html - css 剪辑路径替代方案

html - 用户将鼠标悬停在链接上后如何更改表格单元格的背景?

html - Microsoft BotFramework-WebChat 滚动问题

html - 溢出时剪切 td 元素中的文本

html - 如何使 <div> 完全填充浏览器窗口,包括自 2019 年起的 Mobile Safari

javascript - 未在下拉菜单中选择元素

html - 一个 div 的高度因未知原因移动另一个?

html - 文本在桌面元素内部和移动元素外部