使用 CSS 漂浮在 div 背景中的大型独立图像答案

【问题标题】：Large independent images floating in a divs background using CSS使用 CSS 漂浮在 div 背景中的大型独立图像
【发布时间】：2020-08-01 04:28:56
【问题描述】：

目前我正在尝试在网站的背景上添加大型 PNG 图像（我也使用 Bootstrap 4）。当用户调整屏幕大小时，图像将保留在原处，因此这些独立图像将保留为背景的一部分（除了仍受 CSS 媒体查询影响）

我试图在背景中浮动的图像类型示例：

这种效果的一个例子可以是 Stripe 支付网站上的场景：stripe.com

我知道这似乎是一个简单的问题，但我尝试的一切都是徒劳的。

我正在寻找一个像这样的简单结构：

HTML

<div id="media-section" class="container">
     <img  id="bCamera" src="{{ asset('imgs/bCamera.png') }}" width="500px" , height="500px"/>
</div>

CSS

#bCamera{
 position: relative;
 right: -70%;
}

问题是如果图像是position: absolute;，那么它会随着整个视图宽度而不是内部容器缩放，但是如果它是position: relative;，那么它的位置会更好，但它现在会影响页面流.

因此：在不影响页面流动的情况下，将大的独立图像放置在浮动在 div 背景上的页面上的最佳方法是什么？

【问题讨论】：

【解决方案1】：

:after 是您正在寻找的。你可以试试这样的。

<div id="media-section" class="container"></div>

#media-section:after {
 content: url('imgs/bCamera.png');
}

【讨论】：

诚实关闭。但是当使用 chrome Devtools 调试器并调整视图大小时会破坏页面。我希望页面可以通过 chrome 调试器调整大小而没有问题（如果没有发布其他更好的答案，那么我会及时接受这个答案）
还想补充一点，宽高不影响图片大小。