CSS | Background-image

2022-02-23

整理如何使用 Backgroun-image 用於豐富元素的視覺呈現，同時結合說明 repeat 與 position 的方式控制圖片在元素的背景呈現方式，並結合說明 linear-gradient 的方式調整漸層呈現。

JavaScript logo

說明

.bg-img {
  height: 400px;  
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/assets/Unsplash-People.jpg")
}

Background-Size

background-size: contain;
background-size: cover;
background-size: 50%;

Backgroun-Position

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;

Background-Repeat

background-repeat: space;
background-repeat: repeat;
background-repeat: round;

從迷離阿拉伯中看見多拿滋

.bg-img-artifact {
  height: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: 
    linear-gradient(
      to right bottom, 
      rgba(235, 151, 78, 0.35),
      rgba(235, 151, 78, 0.95)
    ),
    url("/assets/Unsplash-People.jpg")
}
#F2E #CSS #Dev