gpt4 book ai didi

javascript - 使用 HTML 和 CSS 将图像定位到 Circle 中

转载 作者:太空宇宙 更新时间:2023-11-04 16:07:22 26 4
gpt4 key购买 nike

我需要所附图片的每个元素都是交互式的,即能够为它们分配自己的 CSS 类。 enter image description here

我已将图片分成 3 个部分,如下所示。原图中圆的高和宽为476px x 476px。

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

这可能吗?

这是每个切片的 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 创建元素。本题基于使用图像元素并将它们组织成圆形图案。

最佳答案

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

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;
}

关于javascript - 使用 HTML 和 CSS 将图像定位到 Circle 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37074895/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com