HTML / CSS - изображение поверх изображения с эффектом параллакса - PullRequest
Новая
       10

HTML / CSS - изображение поверх изображения с эффектом параллакса

1 голос
/ 19 марта 2020

Я работаю над сайтом WordPress и пытаюсь добавить изображение поверх изображения героя.

Мне нужно поместить lo go в центр фонового изображения. Теперь по центру по горизонтали, но не по центру.

Работая с компоновщиком страниц, продуктом siteorigin, я добавил пользовательские HTML виджеты.

Чтобы получить то, что мне нужно, я добавил этот код: 

.logo
        {
        	height: 30%;
        	display: block;
        	margin: auto;
        	width: auto;
        	z-index: 10;
        }
        
        .parallax {
        /* The image used */
            background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FrOVtRWjOvjg%2Fmaxresdefault.jpg&f=1&nofb=1");
            
        /* Set a specific height */
          height: 100vh;
        	width: 100%;
          
        /* Create the parallax scrolling effect */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: 1;
        }
    <div class="parallax">
        <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Ff%2Ff9%2FUKF_basic_logo.svg%2F1024px-UKF_basic_logo.svg.png&f=1&nofb=1" class="logo"/>
    </div>

1 Ответ

2 голосов
/ 19 марта 2020

Здесь вы go с решением

Используйте абсолютное положение 

.logo {
  height: 30%;
  position: absolute;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  z-index: 10;
}

.parallax {
  /* The image used */
  background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FrOVtRWjOvjg%2Fmaxresdefault.jpg&f=1&nofb=1");
  /* Set a specific height */
  height: 100vh;
  width: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  position: realtive;
}
<div class="parallax">
  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Ff%2Ff9%2FUKF_basic_logo.svg%2F1024px-UKF_basic_logo.svg.png&f=1&nofb=1" class="logo" />
</div>

Используйте position: absolute для lo go и установите top и left как 50% . Затем с помощью transform отрегулируйте lo go по центру, оставив высоту и ширину.

...