HTML / CSS-具有视差效果的图像之上的图像

Giacky 发表于 Dev

吉奇

我正在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>

Shiladitya

在这里你有一个解决方案

使用绝对位置

.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将徽标调整为居中，剩余的高度和宽度。