###### tags: `css`
# CSS筆記

## 1.background-position：移動 background 的位置
- `background-positoin：right bottom `
第一個屬性：左右，X軸、第2個屬性：上下，Y軸
- 也可使用PX，如：
`background-position：30px 30px;`
左邊30、上面30px
如圖：
- background 縮寫教學
background：背景圖片路徑、不重複、color、position。
順序可隨意組合，但還是建議這個順序： `background:url(../img/logo.png) no-repeat red 90% 90%`

## 2.banner 高度
- `height:calc(100vh-50px)` 50px是header高度
- 100vh 針對窗口滿版高度
參考：[CSS 不輕易寫死高度的藝術](https://www.youtube.com/watch?v=1EYUsAlVqY0)

3. ## 斜角背景寫法


.banner {
  width: 100%;
  height: 100vh;
  //背景縮寫技巧  漸層：(角度，背景色，第一個漸層色空間，第二個漸層色空間) background-position / 漸層寬高;
  background: linear-gradient(115deg, #f8d848 50%, transparent 50%) center center /
      100% 100%, //多重背景寫法  url(背景連結) background-position /圖片寬高
      url("https://images.unsplash.com/photo-1594046243098-0fceea9d451e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80")
      right center / auto 100%;

  .bannerText {
    ...;
  }
}

參考：
1.[CSS 筆記 - 金魚切版系列:01-圖文滿版切法](https://hsuchihting.github.io/css/20200713/3642958283/)
2.[codepen](https://codepen.io/hnzxewqw/full/XWXBYEQ)

## 3.網頁右側出現白邊
可以在CSS裡最外層的body寫入：

html, body {
overflow-x: hidden;
}

:::warning
💡 html,body裡都要加 `overflow-x: hidden;`，如果只在body加，會沒有效果。
:::
參考：[Blank space on the right side of my website shows up on larger desktops?](https://forum.squarespace.com/topic/175713-blank-space-on-the-right-side-of-my-website-shows-up-on-larger-desktops/)