解決圖片拉伸問題(涉及'border'與'點9圖')

一. 遇到的問題

開發工做中, 常常會涉及到設置背景, 好比popup、下拉框、提示框等等場景, 下圖展現一下問題的所在, 而後會詳細列出問題涉及的面

我手繪的有點爛實在抱歉!
好比設計師爲咱們設計一個下拉框的背景.
-->正常: 也就是設計是給到咱們的圖, 比例看着很舒服, 四個角的黑色你可想把它想象成裝飾品.
-->抻拉: 實際場景中, 誰也不知道會出現多少個選項, 因此這個下拉框可能會被拉的很長很長, 隨着總體的拉長四個黑色的角也會被拉長, 畢竟都是圖片的一部分.
-->指望: 咱們真正想要的效果, 四個角的大小比例不要變, 而是中間部分拉長就能夠了.

我以前還遇到背景圖放到iphonex上面被拉的面目全非的場景

二. 解決問題的思考

初步分析

1. 之因此會出現這種問題, 那就是由於這個圖是個總體, 要變確定一塊兒變.
2. 最早想到的方法: ui給我上,中,下三部分的圖, 而後我把他們拼接在一塊兒, 上下固定, 中間隨高度自適應.

遺留問題

1. 若是變成了因爲下拉框內容太長, 須要橫向拉伸, 那是否是還要ui給我左,中,右圖???
2. 每次給3張圖, 很是不方便.
3. 代碼寫起來不爽快.

三. 神奇的border-image

看字面意思border-image邊框圖, 那麼就會聯想到, 好比說上邊框與dom元素高度同樣, 那麼上邊框的圖會不會就是dom元素的背景圖了, 也就是搞個障眼法玩玩.
可是隻是設置border-image確定是不夠的, 真正厲害的是他的兩個屬性
##### border-image-width
##### border-image-slice
去學習這個border-image的相關屬性的時候才發現他有多麼的神奇, 具體對這個屬性的詳細解答我感受本身可能作很差, 因此詳細的內容你們自行百度學習一下吧, 我下面來講一下乾貨理解:

1. border-image-slice: 10 10 10 10;(不帶單位默認px, 由於是針對原圖的, 因此不必考慮外界因素)把整個圖進行了切分, 一共四次切分, 化爲了9個區域 如圖: 圖裏面的'圈'就至關於裝飾物, 切割的順序就是上,右,下,左, 對應着一刀,二刀,三刀,四刀.

1. 切分以後能夠指定四個角的寬度, 讓其不隨總體寬高的變化而變化, border-image-slice: 10px 10px 10px 10px;.

四. 點9圖

上面只是說明了理論上的可行性, 那麼這些想法的實現就須要ui同窗的配合了, 點9圖是andriod平臺的應用軟件開發裏的一種特殊的圖片形式, 這個也是在我換到新的崗位時接到了所謂的點9圖, 就趕快查了一下百度解惑, 簡單理解就是點9圖也指出了上面提到的"四刀"的具體切割位置, 它也是把圖片分爲了9個部分, 與咱們前面說的不謀而合.
點9圖比較重要的一點就是指出了ui但願的切割位置!

五. 出現了白色細線

這個白色細線就是"點9圖"的一個小bug了, 如圖所示

居然把4刀的紋路顯示了出來, 這個樣式但是太醜了, 我也是第一次遇到這種問題, 沒有找到很好的解決方案, 後來請教了咱們的負責人才弄懂.

六. "解決"它

1. 先要測量出他的"四刀"的寬度, 測量原圖便可.

1. 附加屬性

   border-image-slice: 12 34 12 34 fill;
     border-image-width: 12px 34px 12px 34px;

改變的寬高也"輕易"不會出現白色的細線了, 爲何說"輕易", 由於在實際開發中分辨率不一樣的電腦還多是會出現一點線, 暫時沒找到100%解決的方法.

七. 回顧與進步

上述所說仍有不足, 想作作到完美必須有ui的配合, 前端更智能化的測量, 好比說我能夠作一個上傳img自動幫他生成 border相關屬性的小插件,也是挺不錯的, 可是咱們公司接下來要統一處理這個問題了, 也就不用咱們一張一張的去找這樣麻煩, 可能公司會在ui交付img的時候統一處理一下.

總結:

一些比較冷門的屬性也許有一天也會大放異彩, 不斷的擴充本身的知識面才能更好的解決現實中的問題, 加油!終身學習.