如何解决在背景图像上的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> 

我会让你的容器的背景图像（和使用背景属性来格式化，使其与屏幕缩放）。

然后，我会用计算值（），用于确定为列表页边距，并使用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>