我怎么能像这样定位图像？

Question

如何定位图像，如下例所示

我尝试了不同的事情，但我无法达到我需要的结果。

提前谢谢。

Answer 1

您可以使用单个div并通过box-shadow属性创建外圈（因为它们内部没有内容），例如。

http://codepen.io/anon/pen/zxjjXW

<强>标记

<div></div>

<强> CSS

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div {
  border-radius: 50%;
  width: 170px;
  height: 170px;
  border: 85px green solid;
  box-shadow: -100px -100px 0 brown, 
              100px -100px 0 lightgray, 
              -100px 100px 0 red, 
              100px 100px 0 blue; 
}

---

最终结果

Answer 2

我会使用带有position属性的css类。

W3schools.com： http://www.w3schools.com/css/css_positioning.asp

示例：

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}