在png圖片上添加div（或其他東西）

所以，我已經做了一些搜索，但是，我甚至不確定我在找什麼。如果這個問題已經解決，請原諒我。在png圖片上添加div（或其他東西）

我要拍攝圖像，例如： http://torreybraman.com/dev/circlechart.jpg

，並作出PNG，其中細胞是空的。然後，我想通過某種div或類似的東西將文本添加到這些單元格。

此外，這些「單元格」內的數據將經常變化，但總體佈局將始終如一。

我知道如何從數據源填充div，但我沒有edea如何填充和旋轉單元格內的數據以繞過圓圈。

有沒有一種像photoshop添加文本框（用一些所見即所得的編輯器）？

我只是不知道從哪裏開始。我需要最簡單的方法來做到這一點，而不需要大量的html/css/javascript知識。

謝謝！

來源

2014-02-23 Torrey Braman

你可以考慮「粗放型」使用CSS transform'屬性'？它看起來就是你所需要的。 – MaxArt

我不知道是否有通過WSYIWYG編輯器的方式，但你需要的是將這個.png設置爲你的CSS文件中'div'的'background-image'，然後添加儘可能多的div你需要的元素，每個單元格一個，然後給他們一個'position：absolute'，並帶有正確的'left'和'top'屬性，再加上旋轉你需要'transform'CSS規則的文本。 – htatche

太棒了。那麼每個細胞及其各自的潛水需要自己的css造型嗎？我一定會考慮這一點。（在我嘗試之前不要關閉這個問題，如果其他人也有輸入，請告訴我）。 –

這裏是一個優雅的少的例子 - 蠻力 - FIDDLE。

它在懸停時移動。

CSS

.holder { 
    width: 450px; 
    height: 442px; 
    border:1px solid black; 
    background-image: url(http://torreybraman.com/dev/circlechart.jpg); 
    background-size: 550 550; 
    background-repeat: none; 
    position: relative; 
    transition: all 5s; 
} 
.holder:hover { 
    transform: rotate(360deg); 
} 
#seca5 { 
    position: absolute; 
    top: 150px; 
    left: 5px; 
    transform: rotate(-70deg); 
} 
#secc5 { 
    position: absolute; 
    top: 14px; 
    left: 190px; 
    transform: rotate(0deg); 
} 
#sece5 { 
    position: absolute; 
    top: 150px; 
    left: 370px; 
    transform: rotate(70deg); 
} 
#sech5 { 
    position: absolute; 
    top: 410px; 
    left: 200px; 
    transform: rotate(180deg); 
}

來源

2014-02-24 01:21:13 TimSPQR

這與我通過試驗和錯誤得到的結果很接近，但更準確一些。這是我正在尋找的。謝謝！ –

這是動態的伎倆。如果您對此有任何疑問，請提問。

JSBin demo。

HTML：

<div id="wrapper"> 
    <img src="/dev/circlehart.jpg" /> 
</div>

CSS：

#wrapper { 
    position: relative; 
    width: 450px; 
} 
.word { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
}

的Javascript：

var words = ["Lorem", "ipsum", "dolor", "sit", "amet,", "consectetuer", 
     "adipiscing", "elit,", "sed", "diam", "nonummy", "nibh", "euismod", 
     "tincidunt", "ut", "laoreet", "dolore", "magna", "aliquam", "erat", 
     "volutpat.", "Ut", "wisi", "enim", "ad", "minim", "veniam,", "quis", 
     "nostrud", "exerci", "tation", "ullamcorper", "suscipit", "lobortis", 
     "nisl", "ut", "aliquip", "ex", "ea", "commodo", "consequat."], 
    wrapper = document.getElementById("wrapper"), 
    xformProp = ["transform", "webkitTransform", "msTransform", "mozTransform"] 
     .filter(function(p) {return p in this;}, wrapper.style)[0], 
    i = 0, box; 

for (; i < words.length; i++) { 
    box = document.createElement("div"); 
    box.className = "word"; 
    box.appendChild(document.createTextNode(words[i])); 
    wrapper.appendChild(box); 
    box.style[xformProp] = "translate(-" + (box.offsetWidth/2) + "px, -" 
      + (box.offsetHeight/2) + "px) rotate(" + (i % 10) * 36 + "deg)" 
      + " translateY(" + (22 - (5 - Math.floor(i/10)) * 45) + "px)"; 
}

來源

2014-02-24 00:54:42 MaxArt

稍微超出我的技能組合，但優秀的都不會少。我會進一步研究這個問題，所以下次我不必單獨做這件事。 –

在png圖片上添加div（或其他東西）

回答

相關問題