Question

我正在尝试更改图片位置：已修复，但是它更改了图片的位置，现在我什至看不到了...我看过这里的几篇文章，找不到一个实体解。有没有办法获得在不同窗口尺寸下调整大小的固定图像，我该如何放置该固定图像？

这是我的代码：

反应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;*/
}

Answer 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>

如何获得CSS位置：修复了背景图片正常工作的问题？

1 个答案: