響應跨瀏覽器和「交叉背景」圖像靈活的方式

任何人都可以請點我出去，或名稱可能以存在達到這個效果，以正確的方式有些tecnhiques：響應跨瀏覽器和「交叉背景」圖像靈活的方式

像這樣：

enter image description here

，並再次：

enter image description here

正如你可能會注意到，關鍵是要精讀兩條線。其中一些行來自文本框，因爲我們希望正確使用字體大小的EM單位，文本框可能會改變。

我從來沒有這樣做過，我會很感激任何一點，爲了進一步調查這個「效果」請。

在此先感謝。

來源

2013-07-25 MEM

我不知道你在說什麼效果。 –

@ PaulD.Waite我試圖在圖像後進一步解釋它。現在更清楚了嗎？謝謝。 - 再一次，我從來沒有這樣做過。這可能是微不足道的，也許我在這裏複雜化了事情。但我相信，如果我們考慮文本框內的EM字體，文本框線會隨文本一起增長，並且仍然需要進行可視化連接，則這並不容易。 – MEM

這只是一個適當的背景圖像定位DIVs的問題。否則，你可以使用html 5畫布或其他東西來繪製一些虛線（更復雜）。 – user1477388

文本框中的字體是否在EM中並不重要。如果字體大小發生變化，文本框的大小會發生變化，但這並不意味着它們之間的空間也必須改變（它可能有一個固定的高度 - 背景高度）。

這裏是一個非常簡單的例子（嘗試改變身體字體大小）：

<html> 
    <head> 
    <style> 
     body { font-size: 12px;} 
     .text { border: 1px solid #999; padding: 15px; font-size:1em; } 
     .line { background: url(http://www.agavegroup.com/images/articles/photoshopCurvedLine/curveFinal.gif) no-repeat center center; height: 50px; } 
    </style> 
    </head> 
    <body> 
    <div class="text"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </div> 
    <div class="line"></div> 
    <div class="text"> 
     Eum, quis consequuntur culpa ex eius totam nemo. 
    </div> 
    </body> 
</html>

如果你想箱高度之間的空間變化，如果字體大小變化，就應該高度設置爲EM並使用背景圖像，可以說，將容器原始高度加倍（所以當高度發生變化時，會顯示更多背景）。你可以看到這個變化高度：50px;至身高：7em; .line {}規則中的（我用它比容器更高的示例圖像）。

這是一個非常基本的例子。標記取決於設計。如果你需要更準確的東西（比如：你需要這條線開始和結束於特定的位置），你應該使用絕對/相對位置。

來源

2013-07-26 03:57:42 Coluccini

響應跨瀏覽器和「交叉背景」圖像靈活的方式

回答

相關問題