Question

我正在尝试将一个图像和一个列表元素固定在我在CSS中设置的背景图像上的某个位置，而不管屏幕大小。我正在使用bootstrap将页面分成两列来制作两个“配置文件”。在每个配置文件中，我再次将页面分成两列，以在配置文件图片和带有文本项目的列表中划分每个配置文件。

我已经尝试了我现在所知道的一切，这是我目前的代码。它还没有工作，但也许任何人都可以提出一些调整来使它工作？ 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单位（因为bootstrap是基于屏幕宽度）

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

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>

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

2 个答案: