奏◎2434沼
噗浪CSS
今日噗浪電腦版更新,調整了圖片預覽縮圖之顯示細項:圖片邊緣多了圓角,並且鼠標移上縮圖時會稍稍變暗
預設語法下收
奏◎2434沼
/縮圖尺寸/
.plurk a.pictureservices img{
height: 64px;
display: block;
max-width: 240px;
}
奏◎2434沼
/縮圖亮度變化/
.plurk a.pictureservices img:hover{
filter: brightness(90%);
}
奏◎2434沼
/縮圖外框/
.plurk a.pictureservices {
display: inline-block;
max-width: 200px;
overflow: hidden;
border: 0;
vertical-align: text-top;
cursor: pointer;
margin: 1px 2px 4px 0;
position: relative;
border-radius: 5px; }
奏◎2434沼
https://images.plurk.com/5qnDBzWygjtzWhDSuoWCOp.gif
預設狀態的縮圖變化大概像這樣
奏◎2434沼
https://images.plurk.com/5iFMkP7jK24eGuRR35pY7r.png https://images.plurk.com/3ykykkcCYnrJl9LMXWWRxR.png https://images.plurk.com/2HZyV32LUhwGj0Gyp3pjGG.png
修改「.plurk a.pictureservices」內的「border-radius」數值,可調整縮圖四邊的圓角幅度
數值越大,圓角越圓、越不尖銳
上面三張圖分別是將數值設定為預設值(5px)、0px、10px的狀態
奏◎2434沼
修改「.plurk a.pictureservices img:hover」內「filter: brightness」的數值,可調整當鼠標移上縮圖時,縮圖的亮度變化
數值越小(小於100%),鼠標移上時縮圖變得越暗、越接近黑色
數值越大(大於100%),鼠標移上時縮圖變得越亮、越接近白色
數值為100%時,縮圖亮度不變
奏◎2434沼
https://images.plurk.com/3tgNJldFg2JRUiXonQbEqX.png https://images.plurk.com/6A4R57TMMiAQnyOIJyTut9.png https://images.plurk.com/463SdOBAAy55DKUErH28Pm.png
https://images.plurk.com/377nP3zpR83a9SUloHTOH.png https://images.plurk.com/5FZmU9vQQNVJrp9TVxRye0.png https://images.plurk.com/2VgYkjH1Dj2KIii5d3166p.png
上面六張圖分別是將數值設定為預設值(90%)、50%、0%、150% 、200%、10000%時,鼠標移上第一張縮圖的狀態
奏◎2434沼
https://images.plurk.com/2YPhXXd6A8MCtTsqTEVmeh.gif
我個人是採用圓角5px、亮度120%的設定
載入新的回覆