CSS 圖片用Path-clip 切出多邊形後空白區域處理

css html5 網頁設計

Rafael 2022-05-08 18:46:35 ‧ 1222 瀏覽

分享至

各位版上大大好~
現在看金魚系列複習CSS切版，已經用Path-clip將上方圖片切成五角形，但後續問題來了，如果想要碰到變黃色時，如何設定讓切過圖片空白區域，利用假元素Psudeo-Element:hover變色?
看起來Path-clip只是切出讓螢幕不顯示，實際img的block區域還是長方形...

P.S金魚系列老師的解法是在text區塊上增加:before border推上去。

目前也是用before上推一個border...
.item:hover .text:before{
position: absolute;
content: "";
** border-top: 50px solid rgba($color: #000000, $alpha: 0.0) ; 只是這段不能設定transparent...不知道為什麼會整個不見**
border-right: 184px solid #FEB85D;
border-left: 184px solid #FEB85D;
top:0;
left:0;
width: 0;
height:0;
transform: translateY(-50px);

再請各位前輩指教有沒有更好的解法，感恩

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Felix

iT邦研究生 2 級 ‧ 2022-05-08 23:36:08

最佳解答

元素原本就是四邊形，不會因為裁切就變成其他多邊形。
裁切範圍外會變透明，而非白色，因此只要對後方元素設定背景就能達成效果了。

簡而言之，我寫了一個簡單的範例，希望能起參考作用。

回應 3
分享
檢舉

Rafael iT邦新手 2 級 ‧ 2022-05-09 05:33:56 檢舉

感謝Felix提供新思維~
如果path-clip()處理後變成透明，設定上一層背景色hover變換也許可行。
目前照您的建議嘗試:
.item:hover {
background: linear-gradient(0deg,yellow,#FEB85D);;
}
是可以讓圖片空白區變色
只是還有個小問題..不知道是圖片透明區仍殘留什麼效果linear-gradient漸層效應只會顯示他們的單一混合色，不會有漸層效果><...

listennn08 iT邦高手 5 級 ‧ 2022-05-09 08:39:03 檢舉

yhosutun2490
你要不要試試看調整一下 deg 的值或顏色的位置， 0deg 是從上到下可能另外一個顏色被 img 蓋住了

background: linear-gradient(0deg, yellow, #FEB85D 20%);

Rafael iT邦新手 2 級 ‧ 2022-05-09 09:17:34 檢舉

有了，太感謝listennn08和felix綜合指點!!
.item:hover{
background:linear-gradient(to bottom,yellow 0%,#FEB85D 100%);
}
將linear設定兩個變色的起始點，並且由上而下就成功了>=<,差別在於設0%，第一個顏色起始點會在圖片下方被遮住。細微差異想要呈現像:hover border那樣就在下移設定50%

登入發表回應