給你的勛章在左上角加上圖標,跟游戲一樣,有專屬圖標

影子江湖

登錄/注冊后可看大圖

大家好久不見,我又來給大家帶來不錯的美化教程了

今天上線看回復的時候發現有個人想要我這個勛章左上角圖標的美化

那么既然如此我就發出了吧

Discuz的勛章設計很不錯,你在自定義添加CSS的時候,每一個勛章都會有一個新的關鍵詞代碼

比如自帶的勛章 是medal_1~XX 自帶的有多少個我忘了,就XX代替了

那就簡單了,在前面加個div#然后加上勛章的代碼和數字不就能給勛章加一個圖標嗎,然后我就開始進行測試了,結果真成了,然后我就對位置進行了細微調整

1. div#medal_33 {
   
2.     background: url(你的圖片網址/img/78px-PF-4.png) no-repeat;
   
3.     margin-left: -1px;控制左右位置
   
4.         transform: translateY(-20px);控制上下位置
   
5. }

復制代碼

把該CSS代碼放在 額 emmm 我用的是第三方的模板, 你可以試試加在你的模板下的common.css和module.css最底下試試

如果你不知道你勛章的數字是多少,你就審查元素勛章就能看見數字是多少了,剩下的就把我分享的那個代碼里的數字改成你勛章的數字就行了

登錄/注冊后可看大圖

如果你要加了新的勛章,那么你加之前最后一個勛章數字是29,那么加了新的勛章之后,新的勛章是不是30 31 32,你就以此類推就行了 剩下的無非就是改數字和圖標罷了

順便分享下我用的圖標吧

登錄/注冊后可看大圖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

文強

這個不錯，改天試一下。

海哥

你的網站發來學習下撒，

天外飄仙

感謝樓主的無私分享

拈花小和尚

這個好。

影子江湖

頂一波         

ahfanxin

收藏了，不錯。

Sorrel

原來是這樣，理解了。不過我有更好的方法。

圖片加載起來比較慢，并且你這也不是一套。

div#medal_33 {
content: '極品';
    background: linear-gradient(to right, #ecffdd, #e0fee2, #d1faea, #b8eaeb, #bbeffa, #b9e7f7, #bddcf9, #c6d2fc, #dec2ff, #e8befd, #f4bdf7, #f7bee9);
    margin-left: -1px;控制左右位置
        transform: translateY(-20px);控制上下位置
}

當然還可以添加一些圓角 角標的來美化。因為我就打算這樣干。

Sorrel

參考你的方法，我想用css做會更友好。

登錄/注冊后可看大圖

影子江湖

Sorrel 發表于 2024-10-14 21:15
參考你的方法，我想用css做會更友好。

主要是沒啥好的圖標素材