Question

我需要附加图片的每个元素都是交互式的，即能够为它们分配自己的CSS类。

我将图像切成3个部分，如下所示。原始图片中圆的高度和宽度为476像素x 476像素。

我想知道如何安排这些切片来复制附加的图像。

这甚至可能吗？

以下是可能有兴趣尝试提供帮助的任何人的每个切片的HTML。

<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">

这不是一个重复的问题，因为“重复”的问题是基于使用svg创建元素。这个问题基于使用图像元素并将它们组织成圆形图案。

Answer 1

不是没有使用一些疯狂的具体定位...

https://jsfiddle.net/968zsj53/

<div class="container">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>

.container {
  width:500px;
}

.container img {
  max-width:100%;
  position:absolute;
}

.container img:nth-child(1){
  left:0;
  top:0;
}

.container img:nth-child(2){
  left:244px;
  top:0;
}

.container img:nth-child(3){
  left:38px;
  top:301px;
}

Answer 2

问题是缺少信息，但一个简单的方法是显示+保证金：

不确定它是否符合您的要求

img:last-of-type {
  display: table;/* or block, table is for the tease */
  margin: -64px 33px 0
}

<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">

对于菜单，您可以保留想法并使用包装器来屏蔽区域

a:last-child img {
  margin: -64px 33px 0
}
nav {
  border: solid;
  height: 470px;
  width: 470px;
  border-radius: 50%;
  position: relative;
}
nav:before {
  content: '';
  position: absolute;
  height: 217px;
  width: 216px;
  background: gray;
  border-radius: 50%;
  top: 127px;
  left: 127px;
}

<nav>
  <a href="a">
    <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
  </a>
  <a href="b">
    <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
  </a>
  <a href="c">
    <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
  </a>
</nav>

Answer 3

尝试这个简单的事情，它可能对你有帮助

div {
  position: relative;
}
#three {
  left: 32px;
  position: absolute;
  top: 296px;
}

<div>
	<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
	<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
	<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png" id="three">
</div>

Answer 4

请稍等一下：http://tympanus.net/Tutorials/CircularNavigation/index2.html

以下是教程：http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

这使用CSS3转换。玩得开心。

Answer 5

＆＃13;

.circle {
  position: absolute;
  width: 120px;
  height: 120px;
  display: block;
}
.circle img:nth-child(1) {
  position: absolute;
  width: 100%;
  left: 0;
}
.circle img:nth-child(2) {
  position: absolute;
  width: 100%;
  left: 125px;
}
.circle img:nth-child(3) {
  position: absolute;
  width: 204px;
  left: 21px;
  height: auto;
  top: 154px;
}

＆＃13;

<div class="circle">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>

＆＃13;

Answer 6

你将不得不搞乱定位。我已经在jsfiddle中为你设置了这个。

以下是：https://jsfiddle.net/x3rbqsbm/

你想在这里寻找的东西是持有容器，然后是元素上的后续位置。

.circle {
  height: 475px;
  position: relative;
  width: 475px;
}

.circle > img {
  position: absolute;
  -webkit-transition: transform 0.15s linear 0s;
  -ms-transition: transform 0.15s linear 0s;
  transition: transform 0.15s linear 0s;
}

.circle > img:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.circle > img:nth-child(1) {
  left: 0;
  top: 0;
}

.circle > img:nth-child(2) {
  right: 0;
  top: 0;
}

.circle > img:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.circle > img:nth-child(3):hover {
  -webkit-transform: scale(1.1) translateX(-50%);
  -ms-transform: scale(1.1) translateX(-50%);
  transform: scale(1.1) translateX(-50%);
}

<div class="circle">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>

Answer 7

    <div class="center-block">
      <just-gage id="thing" title="THING" min="40" max="220"
      label={{thingstring}} value={{thing}}>
      </just-gage>
    </div>

使用HTML和CSS将图像放入Circle

7 个答案: