Question

我正在尝试完成以下操作，我在页面左侧有一些文本，右侧有图形。 https://i.stack.imgur.com/K5jAy.png

我正在使用Bootstrap 4，到目前为止一切进展顺利。但是，当试图将图形合并到网站中时，我遇到了两个问题：

无论网站显示的是什么屏幕尺寸，我总是希望图形的位置相同。目前我将图形的宽度设置为75％。当我在较小的屏幕上预览时，图形甚至不可见，因为宽度对于视口的宽度而言是如此之小。我使用绝对定位，但这似乎会根据屏幕尺寸而改变。
在较大的显示器上预览时，图形显示在文本的顶部。现在，我不认为这会是一个问题。我已经将我的图形保存为png以允许透明度，并且我给了我的图形比我的文本元素更高的z-index。但是，图形似乎像一个块并覆盖我的文本元素，如此处所示。 https://i.stack.imgur.com/wk5QX.png

您对如何解决这两个问题有什么建议吗？

HTML：

<section class="header">
<div class="container-fluid p-4">
    <img class="logo" width="52" height="57" src="img/BraydonCoyerLogoIcon.png" alt="Personal Logo">
    <img src="img/decoration1.png" alt="Colorful Decorations" class="decoration">
</div>
<div class="container mt-5">
    <div class="greeting">
        <div>
            <h1>Hi,</h1>
            <h1>Some <span class="highlight">Text</span></h1>
            <hr align="left"/>
        </div>

    </div>
</div>

CSS：

* {
    background-color: #262628;
    color: #eaeaea;
    font-family: "Varela Round", Helvetica, Arial;
}

.greeting {
    margin-top: 10em;
}

.greeting h1 {
    font-size: 100px;
}

.highlight {
    color: #f99e46;
}

.slogan {
    font-size: 20px;
}
hr {
    background-color: white;
    width: 50%;
}

.decoration {
    width: 75%;
    position: absolute;
    z-index: initial;
    top: -150px;
    left: 520px;
}

Answer 1

尝试使用左侧位置的百分比：left: 50%
看起来您的装饰图片从通配符选择器

background-color: #262628;

图像叠加使用Z索引，但无法看到下面的元素

1 个答案: