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

给你一个解决方案

使用绝对位置

 .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将徽标调整到中心，左侧的高度和宽度。