[英]Position images into Circle with HTML and CSS
我需要所附圖片的每個元素都是交互式的,即能夠為其分配自己的CSS類。
我將圖像切成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;
}
問題是缺少信息,但是一種簡單的方法是顯示+邊距:
不確定是否符合您的要求
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>
試試這個簡單的事情,可能對您有幫助
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>
只需在這里看看: http : //tympanus.net/Tutorials/CircularNavigation/index2.html
這是本教程: http : //tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
這使用CSS3轉換。 玩得開心。
.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; }
<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>
您將不得不擺弄定位。 我已經在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>
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body class="w3-container"> <h2>Image in a Circle</h2> <p>You do not need boostrap, you can use w3-schools libraries instead</p> <img src="http://i.stack.imgur.com/schtq.png" class="w3-circle" alt="" style="width:50%"> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.