奏◎2434沼
@ncy944123
Thu, Jul 11, 2019 12:20 PM
Thu, Jul 11, 2019 12:44 PM
13
6
噗浪CSS
今日噗浪電腦版更新,調整了圖片預覽縮圖之顯示細項:圖片邊緣多了圓角,並且鼠標移上縮圖時會稍稍變暗
預設語法下收
奏◎2434沼
@ncy944123
Thu, Jul 11, 2019 12:20 PM
Thu, Jul 11, 2019 12:31 PM
/
縮圖尺寸
/
.plurk a.pictureservices img{
height: 64px;
display: block;
max-width: 240px;
}
奏◎2434沼
@ncy944123
Thu, Jul 11, 2019 12:20 PM
Thu, Jul 11, 2019 12:27 PM
/
縮圖亮度變化
/
.plurk a.pictureservices img:hover{
filter: brightness(90%);
}
奏◎2434沼
@ncy944123
Thu, Jul 11, 2019 12:31 PM
Thu, Jul 11, 2019 12:42 PM
/
縮圖外框
/
.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沼
@ncy944123
Thu, Jul 11, 2019 12:34 PM
預設狀態的縮圖變化大概像這樣
奏◎2434沼
@ncy944123
Thu, Jul 11, 2019 12:39 PM
Thu, Jul 11, 2019 12:52 PM
修改「.plurk a.pictureservices」內的「border-radius」數值,可調整縮圖四邊的圓角幅度
數值越大,圓角越圓、越不尖銳
上面三張圖分別是將數值設定為預設值(5px)、0px、10px的狀態
奏◎2434沼
@ncy944123
Thu, Jul 11, 2019 12:51 PM
Thu, Jul 11, 2019 12:57 PM
修改「.plurk a.pictureservices img:hover」內「filter: brightness」的數值,可調整當鼠標移上縮圖時,縮圖的亮度變化
數值越小(小於100%),鼠標移上時縮圖變得越暗、越接近黑色
數值越大(大於100%),鼠標移上時縮圖變得越亮、越接近白色
數值為100%時,縮圖亮度不變
奏◎2434沼
@ncy944123
Thu, Jul 11, 2019 12:55 PM
Fri, Jul 12, 2019 8:32 AM
上面六張圖分別是將數值設定為預設值(90%)、50%、0%、150% 、200%、10000%時,鼠標移上第一張縮圖的狀態
奏◎2434沼
@ncy944123
Thu, Jul 11, 2019 1:03 PM
Wed, Nov 1, 2023 8:19 AM
我個人是採用圓角5px、亮度120%的設定
載入新的回覆
今日噗浪電腦版更新,調整了圖片預覽縮圖之顯示細項:圖片邊緣多了圓角,並且鼠標移上縮圖時會稍稍變暗
預設語法下收
.plurk a.pictureservices img{
height: 64px;
display: block;
max-width: 240px;
}
.plurk a.pictureservices img:hover{
filter: brightness(90%);
}
.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; }
預設狀態的縮圖變化大概像這樣
修改「.plurk a.pictureservices」內的「border-radius」數值,可調整縮圖四邊的圓角幅度
數值越大,圓角越圓、越不尖銳
上面三張圖分別是將數值設定為預設值(5px)、0px、10px的狀態
數值越小(小於100%),鼠標移上時縮圖變得越暗、越接近黑色
數值越大(大於100%),鼠標移上時縮圖變得越亮、越接近白色
數值為100%時,縮圖亮度不變
上面六張圖分別是將數值設定為預設值(90%)、50%、0%、150% 、200%、10000%時,鼠標移上第一張縮圖的狀態
我個人是採用圓角5px、亮度120%的設定