相信不少人都看過(guò)圓明園破損后的圖片，殘?jiān)珨”?#xff0c;令人惋惜。一些網(wǎng)站為了增加對(duì)比程度，將圓明園被毀前后的圖片放在一起，這樣確實(shí)非常鮮明。
“對(duì)比”已經(jīng)越來(lái)越多地被用來(lái)在偏設(shè)計(jì)的網(wǎng)站中了，而最常見(jiàn)的布局方案是將兩張圖并排/并列放置。但由此帶來(lái)的問(wèn)題是：就像“找不同”一樣，人通常只能觀察到非常明顯的差異 —— 正如上面所說(shuō)“圓明園對(duì)比圖”一樣。于是還有的網(wǎng)站干脆把兩張對(duì)比圖弄成一張圖片展示，簡(jiǎn)直無(wú)語(yǔ)。

跟上面描述場(chǎng)景相似的還有一個(gè)離譜的解決方案：把兩張圖放在一個(gè)位置上，然后定時(shí)來(lái)回變換 —— 開(kāi)發(fā)者人為制造一個(gè)突兀地、抓住眼球的場(chǎng)景（氛圍）！但這樣也不行：用戶(hù)需要等待多次變換才能看到你想表達(dá)的東西。這不僅犧牲了他們的時(shí)間也會(huì)分散他們的精力。就像這樣：

（你還可以讓它再快一些）
但是說(shuō)到這里，我們能不能不改變“把兩張圖放在一個(gè)位置上”的整體方針，而把“自動(dòng)地變換”改為“用戶(hù)手動(dòng)控制圖片展示”？因?yàn)樯厦孢@個(gè)效果太丑了…而且一般頁(yè)面有一個(gè)輪播圖就夠了！
經(jīng)過(guò)查找，筆者發(fā)現(xiàn)了一種既符合所想又非常友好的解決方案，被叫做“圖片對(duì)比滑動(dòng)控件”，其實(shí)現(xiàn)思路是：將兩張圖片疊加起來(lái)，初始時(shí)各自只展示一部分，允許用戶(hù)通過(guò)拖動(dòng)分隔條來(lái)控制兩張圖片各自顯露區(qū)域的大小。
咔~

通過(guò)上面的描述，你能想到什么？

圖片疊加 -> 必然至少一張圖片脫離了文檔流存在

拖動(dòng)大小 -> <textarea> -> css resize 屬性（其實(shí)用JS也可以，但在筆者總結(jié)的“小夢(mèng)優(yōu)先策略”中，CSS使用優(yōu)先級(jí)大于JS，這有好處！）

---

讓我們先來(lái)剖析下 resize 屬性！
你或許從來(lái)沒(méi)聽(tīng)過(guò)它，但你一定體驗(yàn)過(guò) —— 因?yàn)閷?duì) <textarea> 元素來(lái)說(shuō)，這個(gè)屬性被默認(rèn)賦值為 both ，這讓 textarea 在水平和垂直方向上都可以任意調(diào)整：

• both：允許用戶(hù)在水平和垂直方向上調(diào)整元素的大小
• horizontal：允許用戶(hù)在水平方向上調(diào)整元素的大小
• vertical：允許用戶(hù)在垂直方向上調(diào)整元素的大小
• none：一般為默認(rèn)值
• block：?根據(jù)??編寫(xiě)模式??和??方向??值，元素顯示允許用戶(hù)水平或垂直調(diào)整組件大小的機(jī)制
• inline：根據(jù)??編寫(xiě)模式??和??方向??值，元素顯示允許用戶(hù)以?xún)?nèi)聯(lián)方向水平或垂直調(diào)整元素大小的機(jī)制

實(shí)際上，這個(gè)屬性可作用且生效在任何 overflow 值不是 visible 的元素上！

讓我們?cè)倮^續(xù)剖析一下上面說(shuō)的“終極解決方案”！
深入一點(diǎn)地說(shuō)，它基本包含兩層：一層可以拖動(dòng)，一層是固定的。上層圖片在水平方向調(diào)整大小從而或多或少地顯露出下層圖片。

所以，HTML代碼應(yīng)該是這樣的：

<div class="image-slider" title="拖動(dòng)右下角可自由查看"><div><img src="img/n1.jpg" alt="這是原圖" /></div><img src="img/n2.jpg" alt="這是對(duì)比圖" /> </div>

接下來(lái)初始化一些定位和尺寸：

.image-slider{position: relative;display: inline-block;width: 400px;height: 300px;overflow: hidden; } .image-slider > div{position: absolute;top: 0;bottom: 0;left: 0;width: 50%;max-width: 100%; /* 雖說(shuō)下面設(shè)置了overflow，但是你會(huì)發(fā)現(xiàn)如果不設(shè)置這一行拖動(dòng)行為仍然可以發(fā)生在父元素之外 */overflow: hidden; /* 溢出隱藏 */resize: horizontal; } .image-slider img{display: block;height: 100%; }

這時(shí)候，圖片上就顯示了“經(jīng)典 textarea 手柄”了。不過(guò)…這怎么看怎么別扭的右下角圖標(biāo)著實(shí)難受，還不容易辨認(rèn)！
不幸的是，目前還沒(méi)有任何標(biāo)準(zhǔn)的方法可以設(shè)置這個(gè)“調(diào)節(jié)手柄”的樣式。有些渲染引擎特別為這個(gè)需求提供了私有的偽元素（比如 ::-webkit-resizer），但目前來(lái)看局限性非常大。筆者有一個(gè)大膽的想法：用一個(gè)偽元素覆蓋在調(diào)節(jié)手柄之上。這一方面可以很方便地設(shè)置樣式；另一方面，即使在不加 pointer-events: none 的情況下，這個(gè)偽元素也不會(huì)干擾調(diào)節(jié)手柄的功能：

.image-slider > div::before{content: '';position: absolute;bottom: 0;right: 0;width: 12px;height: 12px;padding: 1px;background: linear-gradient(-45deg,white 50%,transparent 0);background-clip: content-box;cursor: ew-resize; }

這樣就幾乎完美的實(shí)現(xiàn)我們想要的效果了！

nice~

---

福利放送
最近接到華為云的邀請(qǐng)
這一年中華為云也陸陸續(xù)續(xù)推出了各種各樣的活動(dòng)，但是毫不客氣的講，沒(méi)有比開(kāi)年采購(gòu)季更加優(yōu)惠的。
所以今年的開(kāi)年采購(gòu)季活動(dòng)又開(kāi)始了，各位小伙伴們不要錯(cuò)過(guò)呀！
首先是主打產(chǎn)品：

• 1核2G 1M帶寬云耀云服務(wù)器 88一年，低至0.7折。限購(gòu)1臺(tái)（企業(yè)認(rèn)證可購(gòu)買(mǎi)兩臺(tái)）
• 2核4G 5M帶寬云耀云服務(wù)器 413一年，低至1.2折。限購(gòu)3臺(tái)（墻裂推薦）
• 4核8G 1M帶寬云耀云服務(wù)器 599一年，低至1.6折。限購(gòu)3臺(tái)
• 4核8G 5M帶寬C6s高性能服務(wù)器 2385一年，低至3.9折。限購(gòu)3臺(tái)
• .COM域名23元一年！！！（推薦）

之前活動(dòng)沒(méi)有參與上的小伙伴千萬(wàn)不要錯(cuò)過(guò)。
另外，我也跟華為云的小伙伴爭(zhēng)取到了一些額外的福利。

個(gè)人注冊(cè)并進(jìn)行賬號(hào)認(rèn)證，可獲得100元無(wú)門(mén)檻代金券！注意是無(wú)門(mén)檻，不是官網(wǎng)送的滿(mǎn)減券。

企業(yè)注冊(cè)并進(jìn)行企業(yè)實(shí)名認(rèn)證的，可獲得200元代金券

注冊(cè)并購(gòu)買(mǎi)活動(dòng)產(chǎn)品，再送100元代金券；另外企業(yè)注冊(cè)的小伙伴還可以參加抽獎(jiǎng)，100%中獎(jiǎng)，最高可獲得華為Mate Pad。

參與方式 ：掃碼進(jìn)入活動(dòng)頁(yè)面，點(diǎn)擊右上角注冊(cè)華為云賬號(hào)

通過(guò)二維碼/鏈接注冊(cè)、實(shí)名認(rèn)證用戶(hù)，會(huì)在7工作日內(nèi)收到代金券。代金券沒(méi)有任何消費(fèi)門(mén)檻，但是不能用于購(gòu)買(mǎi)活動(dòng)產(chǎn)品。可以給自己新買(mǎi)的服務(wù)器續(xù)費(fèi)，或者買(mǎi)塊硬盤(pán)。

注：開(kāi)年采購(gòu)季最優(yōu)惠的產(chǎn)品都是僅限新用戶(hù)購(gòu)買(mǎi)的！所以大家一定不要先使用代金券，用了就不是新用戶(hù)了。新用戶(hù)資格非常珍貴，沒(méi)有新用戶(hù)資格就沒(méi)辦法購(gòu)買(mǎi)88元一年的服務(wù)器了。

總結(jié)

以上是生活随笔為你收集整理的图片比对让网页熠熠生辉的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。