Как получить положение CSS: исправлено для правильной работы фонового изображения? - PullRequest
Новая
       7

Как получить положение CSS: исправлено для правильной работы фонового изображения?

0 голосов
/ 09 ноября 2018

Я пытаюсь изменить положение своего изображения: исправлено, однако оно меняется там, где изображение, и я даже не могу его больше видеть ... Я просмотрел несколько сообщений здесь и не могу найти твердое тело решение. Есть ли способ получить фиксированное изображение, размер которого изменяется при разном размере окна, и как мне расположить это фиксированное изображение?

Вот мой код:

реагирует 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;*/
}

1 Ответ

0 голосов
/ 09 ноября 2018

Я думаю, вы хотите что-то подобное.обратите внимание, что при изменении размера изображения оно масштабируется так, чтобы наилучшим образом соответствовать доступному пространству без искажения изображения.Ключевым моментом здесь является размер фона и положение фона.попробуйте добавить больше элементов и удалить фоновое вложение, чтобы получить немного другое поведение

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