如何修复背景图像上的 HTML 元素位置

Question

我正在尝试将图像和列表元素固定在我在 CSS 中设置的背景图像上的某个位置，无论屏幕大小如何。我正在使用引导程序将页面分为两列以创建两个“配置文件”。在每个配置文件中，我再次将页面分为两列，以将每个配置文件划分为配置文件图片和带有文本项的列表。

我已经尝试了我现在所知道的一切，这是我目前的代码。它还没有工作，但也许任何人都能够提出某些调整以使其工作？ This is what I am trying to achieve 和 This is the image I am using。

HTML：

<div class="content row">
    <div class="col-sm-6">
        <div class="profile">
            <div class="profile-content">
                <p class="big profile-name">Some name</p>
                <div class="content row">
                    <div class="col-md-4 profile-img"><img src="./name.png"></div>
                    <div class="col-md-8"><ul><li>Web: HTML/CSS/PHP/JQuery</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="profile">
            <div class="profile-content">
                <p class="big profile-name">Some name</p>
                <div class="content row "></div>
                    <div class="col-md-4"><ul><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                    <div class="col-md-8"><ul><li>Web: HTML/CSS/PHP/JQuery</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                </div>
            </div>
        </div>
    </div>

CSS

.profile {
background-image: url('/screen-1315650.png');
background-repeat: no-repeat;
height: 400px;
background-size: 100%;
}

.profile-content {
padding: 40px 10px 0px 10px;
margin: 10% 10% 10% 10%;
overflow: hidden;
height: 45%;
}

.profile-img {
align-self: flex-start;
}

.profile-name {
font-weight: 600;
}

.content {
position: relative;
margin: auto;
width: 100%;
max-width: 1024px;
text-align: center;
padding: 0 10px;
}

任何帮助将不胜感激！我还在学习，所以请教我如何钓鱼:-)

Answer 1

有很多方法可以定位一个元素，但是因为你的溢出问题：

这是我将使用的结构

<div id="container">
    <ol id="list"></ol>
<div>

我会将容器的背景设为图像（并使用背景属性对其进行格式化，使其随屏幕缩放）。

然后，我将使用 calc() 来确定列表的边距，并使用 vw 单位（因为引导程序基于屏幕宽度）

我会避免相对绝对定位，因为如果你的列表太长，它会溢出。

Example

Answer 2

请试试这个代码：

<style>
    .profile {
        background: url('mac.png') no-repeat left center;
        height: 400px;
        background-size: 100%;
        position: relative;
    }

    .profile-content {
        position: absolute;
        top: 20%;
        left: 10%;
        right: 10%;
        z-index: 9;
        bottom: 0;
    }

    .content ul {
        margin:0;
        padding:0;
        list-style:none;
        text-align: left;
    }

    .profile-name {
        font-weight: 600;
    }

    .content {
        position: relative;
        margin: auto;
        width: 100%;
        max-width: 1024px;
        text-align: center;
        padding: 0 10px;
    }
</style>


<div class="content row">
    <div class="col-sm-6">
        <div class="profile">
            <div class="profile-content">
                <p class="big profile-name">Some name</p>
                <div class="content row">
                    <div class="col-md-4 profile-img"><img class="img-responsive" src="./name.png"></div>
                    <div class="col-md-8"><ul><li>Web: HTML/CSS/PHP/JQuery</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="profile">
            <div class="profile-content">
                <p class="big profile-name">Some name</p>
                <div class="content row "></div>
                    <div class="col-md-4"><ul><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                    <div class="col-md-8"><ul><li>Web: HTML/CSS/PHP/JQuery</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></div>
                </div>
            </div>
        </div>
    </div>