如何获得 CSS 位置：固定背景图像以正常工作？答案

【问题标题】：How to get CSS position: fixed for a background image to work properly?如何获得 CSS 位置：固定背景图像以正常工作？
【发布时间】：2019-04-12 14:23:23
【问题描述】：

我正在尝试更改我的图像位置：已修复，但是它会更改图像的位置，我现在什至无法再看到它了...我在这里查看了几篇帖子，但找不到实体解决方案。有没有办法获得在不同窗口大小上调整大小的固定图像以及如何定位这个固定图像？

这是我的代码：

反应jsx：

...
<div className="home-root3" style={{backgroundImage: logo2}}>
                <div className="bottom-left">word1</div>
                <div className="bottom-right">word2</div>
                <div className="top-center">word3</div>
            </div>  
...

CSS：

.home-root3 {        
    position: fixed;
    background:no-repeat;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;    
    /*background-position: 50% 50%;*/
    /*background-size: contain;*/
}

【问题讨论】：

你能建立一个工作复现来显示你的问题吗？
在元素上使用 position: fixed 会将其从页面流中移除，因此它可能隐藏在其他内容之后，但我们需要查看 HTML 的其余部分

标签： javascript css reactjs image frontend

【解决方案1】：

我想你想要这样的东西。请注意，当您调整图像大小时，它会如何缩放以最适合可用空间，而不会扭曲图像。这里的关键是背景大小和背景位置。尝试添加更多元素并删除背景附件以获得稍微不同的行为

https://codepen.io/anon/pen/jQqXQV

.home-root3 {
  background: url(https://cdn-images-1.medium.com/max/2000/1*OvqueeLCylgdld5YvYZO0A.jpeg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.home-root3 div {
  margin: 50px;
  color: white;
}

<div class="home-root3">
  <div className="bottom-left">word1</div>
  <div className="bottom-right">word2</div>
  <div className="top-center">word3</div>
  <div className="top-center">word4</div>
  <div className="top-center">word5</div>
  <div className="top-center">word6</div>
  <div className="top-center">word7</div>
  <div className="top-center">word8</div>
</div>

【讨论】：