HTML/CSS -图像上具有视差效应

Question

我正在WordPress网站上工作，我试图在英雄形象上添加一个图片。

我需要把徽标放在背景图像的中心。现在是水平中心，而不是垂直中心。

通过使用页面生成器、站点原产产品，我添加了一个自定义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>

​

Answer 1

给你一个解决办法

使用位置作为绝对

​

.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作为徽标，并将top和left设置为50%。然后使用transform调整徽标，使其在高度和宽度上以左侧居中。