CSS在背景中的特定位置定位图像

Question

我有一个背景（使用style="background-image:url('')）和2个图像。

我需要的图像定位是这样的：

第一张图片：

• 30PX从背景

• 15px的从右侧

的顶部

从背景

15px的底部从左边

我的CSS classse 2图像

• 15px的：

  1. myItem1 - 第一影像类
  2. myItem2 - second ima GE类
  3. BgGrass - 背景

  我一直想：

  .BgGrass { 
      background-image:url('images/bg/grass.png'); 
      width:800px; 
      height:480px; 
  } 
  
  .myItem1 { 
      position:absolute; 
      bottom: 15px; 
      left:15px; 
  } 
  
  .myItem2 { 
      position:absolute; 
      top:40px; 
      right:20px; 
  } 
  

  有什么不对？

  更新：这里的解决方案提供了我需要添加位置：绝对到我的背景。现在的问题是，在这个背景下的所有内容都在它内部移动，并造成一团糟。

  <div class='BgGrass'> 
  
  <img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' /> 
  
  <img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' /> 
  
  </div> 
  
  <div class="clearfix"></div> 
  
  All content here is inside the background 
  

Answer 1

这本来是比较容易，如果我们可以看到原来的网页你的工作（特别是HTML）

无论如何，假设这是你的HTML：

<div class='BgGrass'> 

<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' /> 

<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' /> 

</div> 

然后CSS应该是：

.BgGrass { 
    background-image:url('http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg'); 
    width:800px; 
    height:480px; 
    position:relative;  
} 

.myItem1 { 
    position:absolute; 
    top: 30px; 
    right:15px; 
    width: 100px; 
} 

.myItem2 { 
    position:absolute; 
    bottom:15px; 
    left:15px; 
    width: 100px; 
} 

CSSfiddle：https://jsfiddle.net/5ndbzg6h/

问题：你需要相对位置添加到您的父母DIV。

Answer 2

自定义here
position:absolute相对的构件被定位为它的第一个定位的（而不是静态）的祖先元素

默认情况下，BgGrass是静态的，所以你必须给他就像relative的其他位置。

.BgGrass { 
 
    background-color:red; 
 
    position:relative 
 
    width:800px; 
 
    height:480px; 
 
} 
 

 
.myItem1 { 
 
    position:absolute; 
 
    bottom: 15px; 
 
    left:15px; 
 
} 
 

 
.myItem2 { 
 
    position:absolute; 
 
    top:40px; 
 
    right:20px; 
 
}

<div class="BgGrass"> 
 
    
 
    <div class="myItem1">ABC</div> 
 
    
 
    <div class="myItem2">DEF</div> 
 
    
 
</div>