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

Question

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

我已经尝试了所有我现在知道的东西，这是我现在的代码。 它尚不起作用，但是也许任何人都可以提出某些调整以使其起作用？ 这是我要实现的目标 ， 这是我正在使用的图像 。

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单位（因为引导程序基于屏幕宽度）

我会避免相对绝对定位，因为在您的列表过长的情况下，它将溢出。

例

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>