LV. 25
GP 44k

【心得】小屋背景設計

樓主 fired00002
94 -
前言:

前提這會有些CSS的方法在,但不會太難

除了用在小屋背景設計,也可以自己裝stylish設計時常逛的網頁

--

小屋背景一開始面對的就是背景圖片

巴哈的只有把圖片放上去,置中,左上,左下等等選項,沒有更細部的選項



我用css的方法來說明調整

待會用荊軻這張圖當範例

先右鍵-檢查,點控制台下方的body屬性

再到右方的css欄改動body的background-image:url()


背景就會變成這樣


接著是調整圖片位置,我示範幾種css背景調整方式

主要由這幾種來控制,這設計的很方便,不用特別去記

   
   background-repeat:

    圖片是否重複



    background-attachment: fixed;

    fixed:圖片不會隨著滾輪而滑動

    background-color: #000000;

    圖片沒覆蓋到的背景部分顏色
    點顏色的框框可以自己拉顏色

    background-size: 108% auto;

    圖片整體大小控制
    前面是寬,後面是高,通常我都會把高設定auto
    要做比較精準的話,可以把寬改寫成108px或多少調整

    background-position: -101px 23px;
    
    圖片上下距離調整
    前面數值是做寬度調整,後面是高



    background-image:
    linear-gradient(
    to right,
    rgba(0, 0, 0, 0.78) 67%,
    rgba(0, 0, 0, 0.11) 103%,
    url(http://i.imgur.com/moEw49Y.jpg);
    
    顏色漸變
    這看起來很長,仔細看的話是一開始背景圖片的延伸變化
    他的主要功能是,假如我這張圖十分亮白會影響到閱讀
    那我可以用這功能做一層灰黑的色調,遮蔽亮白度,也可以指定遮蔽區域

    例如第三行的to right是由左到右
    第四行指定的顏色就會由左到右延伸,佔67%部分
    第五行指定的顏色就會從67%部分繼續延伸
    我會指定第五行103%,是因為它所呈現出來的漸變感比較漂亮

    我用黑的來表示,色彩呈現出來就像下面

    

以上都調好後,接著就是把圖片擷取出來

目前我網頁是這樣


把body屬性內部的html清光



變成這樣


旁邊的css記得打 overflow:hidden

主要目的是把旁邊的上下拉桿消掉


再把圖擷取出來

我都是用shareX直接點,擷取出來



再來把圖上傳到imgur或其他圖床,

把圖片網址貼到小屋設計的背景底圖

這樣小屋背景就完成了



順便一提如何做透明遮版

先設計出想要的顏色

ctrl+shift+c點想要設計的部分

在css表那邊打 background-color:white

在圖片我滑鼠的地方點下去拉想要的顏色

第一個拉桿是色譜

第二個拉桿是透明度




調好想要的顏色參數後,例如我目前的顏色是rgba(255, 255, 255, 0.57)

我是習慣直接用這網站製作透明圖板 https://pixlr.com/editor/


接著存圖,把圖上傳到圖床

圖片網址貼到這邊透明圖版就OK了



巴哈的小屋設計算是很容易製作的,接著就是怎麼思考設計了
94
-
LV. 13
GP 2k
2 樓 白面金毛九尾狐 qazw0102
1 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

優質。
1
-
LV. 25
GP 180
3 樓 午夜 ts861129
0 -
0
-
LV. 10
GP 57
4 樓 烤飯糰大師 lolgary99
0 -
讚 這篇優質
0
-
LV. 22
GP 159
6 樓 大杯可樂 ◔ ౪◔ ss22265939
0 -
精華
0
-
LV. 11
GP 123
7 樓 錒亭ღ k201369
0 -
好多通知好羨慕
0
-
LV. 22
GP 2k
8 樓 白髮控夜夜-夏日風情 hk89355
0 -
推舞姐姐
0
-
LV. 17
GP 356
9 樓 廢柴憲兵 ahoymy
1 -
優質推
1
-
LV. 27
GP 3k
10 樓 深海異音 hbl917070
3 -
我覺得其實選圖片才是最困難的技巧

因為每個人螢幕解析度都不一樣,而且巴哈又不支援背景圖片size自動全滿

像我習慣把巴哈放大1.5倍瀏覽,雖然我螢幕解析度有1600,但實際網頁寬度可能只剩下1000左右,有些人小屋用了1張寬度1600的圖片,表示左右300會被切掉

如果背景圖片不是主體在中間的那種,或可以一直延伸的連續圖片、看起來就會很奇怪
3
-
LV. 31
GP 7k
11 樓 X洨妹 blackXblue
0 -
0
-
LV. 8
GP 175
12 樓 無心插柳柳橙汁 smaiipig92
0 -
也太優質 推廣
0
-
LV. 21
GP 7k
13 樓 我妹是AB angelbleach
0 -
優質舞比
0
-
LV. 17
GP 715
14 樓 鳳梨朋友 s930335
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

0
-
LV. 29
GP 234
15 樓 你看不見我 sundy1966
0 -
U質推ㄍ
0
-
LV. 21
GP 124
16 樓 苗栗最後希望 jay34588
0 -
出差後回家學一波
0
-
LV. 12
GP 57
17 樓 不帶走一片雲彩 cnacryw5
0 -
0
-
LV. 10
GP 32
18 樓 人類至上 jst30441
0 -
卡優質
0
-
LV. 24
GP 82
19 樓 唯我獨尊 jimmy80203
0 -
以前有做過
不過懶得弄的很精細
0
-
LV. 28
GP 230
20 樓 Travel cch0418uy
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

0
-
未登入的勇者,要加入 36 樓的討論嗎?
板務人員:

7700 筆精華,10/22 更新
一個月內新增 0
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】