LV. 25
GP 44k

【心得】小屋背景設計

樓主 fired00002
91 -
前言:

前提這會有些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了



巴哈的小屋設計算是很容易製作的,接著就是怎麼思考設計了
91
-
未登入的勇者,要加入討論嗎?
板務人員:

7568 筆精華,昨天 更新
一個月內新增 14
歡迎加入共同維護。


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

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