HTML/CSS - 具有视差效果的图像重叠

Question

我正在 WordPress 网站上工作，我正在尝试在主图上添加一个图像。

我需要将徽标放在背景图片的中央。现在水平居中但不是垂直居中。

使用页面构建器、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>

Answer 1

给你一个解决方案

Use position as absolute

.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 将徽标调整到居中，同时保留高度和宽度。

HTML/CSS - 具有视差效果的图像重叠

HTML/CSS - image over image with parallax effect

html

css

wordpress

parallax