我發現了7個關於 CSS backgroundImage 好用的技巧

時間 2020-05-30

標籤發現關於 css backgroundimage 好用技巧欄目 CSS 简体版

原文原文鏈接

❝
做者：ryanmcdermott 譯者：前端小智來源：githubcss
❞

❝
「點贊再看，養成習慣」html

「本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。」前端
❞

背景圖像多是咱們全部前端開發人員在咱們的職業生涯中至少使用過幾回的CSS屬性之一。大多數人認爲背景圖像不可能有任何不尋常的地方，但通過研究，答案並不是如此。因此本文收集了七個我認爲最有用的技巧，並建立了一些代碼示例。git

1.背景圖如何才能完美適配視口

讓背景圖適配視口很容易，須要使用下面 CSS 便可：github

body {
  background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
複製代碼

事例源碼：codepen.io/duomly/pen/…web

2.如何在CSS中使用多個背景圖片？

若是我想在背景中添加一張以上的圖片怎麼辦？CSS3 中能夠直接指定多個背景路徑，以下所示：面試

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}
複製代碼

事例源碼：codepen.io/duomly/pen/…微信

3.如何建立一個三角形的背景圖像

另外一個很酷的背景特效就是三角形背景，當咱們想展現某些徹底不一樣的選擇（例如白天和黑夜或冬天和夏天）時，這種特效就更加棒。網絡

思路是這樣的，首先建立兩個div，而後將兩個背景都添加到其中，而後，第二個div使用clip-path屬性畫出三角形。編輯器

「html」

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>
複製代碼

「css」

body {
  margin: 0;
  padding: 0;
}
div { position: absolute; height: 100vh; width: 100vw; }
.day { background-image: url("images.unsplash.com/photo-14779…"); background-size: cover; background-repeat: no-repeat; }
複製代碼.night { background-image: url("images.unsplash.com/photo-14935…"); background-size: cover; background-repeat: no-repeat; clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh); } 複製代碼

源碼：codepen.io/duomly/pen/…

4.如何在背景圖像上添加疊加漸變？

有時咱們想在背景上添加一些文字，但有的圖片太亮，致使字看不清楚，因此這裏咱們就須要讓背景圖疊加一些暗樂來突出文字效果。

例如，能夠經過添加粉紅橙色漸變或紅色至透明漸變來加強日落圖像，這些狀況下使用疊加的漸變就很容易作到。

「css」

body {
  background-image: 
    linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
    url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center
}
複製代碼複製代碼

源碼：codepen.io/duomly/pen/…

5.如何建立一個顏色動態變化的背景

若是你不少顏色，你想確認哪一種顏色更適合背景圖片的顏色，剛動態更改背景顏色的技巧就頗有用。

「css」

HTML CSSResult
EDIT ON
@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
}
@-webkit-keyframes background-overlay-animation { 0% { background-image: linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%) url("images.unsplash.com/photo-15593…"); } 25% { background-image: linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("images.unsplash.com/photo-15593…"); } 50% { background-image: linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%), url("images.unsplash.com/photo-15593…"); } 100% { background-image: linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
複製代碼複製代碼

源碼：codepen.io/duomly/pen/…

「你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。」

6. 如何製做網格背景圖像？

有時候會遇到一些須要有藝術或者攝影類的項目，他們通常要求網站要有藝術信息，要有創意。網絡的背景就挺有創意的，效果以下:

「HTML」

<body>
<div class="container">
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
</div>
</body>
複製代碼

「scss」

body {
 margin: 0;
  padding: 0;
}
複製代碼.container { position: absolute; width: 100%; height: 100%; background: black; display: grid; grid-template-columns: 25fr 30fr 40fr 15fr; grid-template-rows: 20fr 45fr 5fr 30fr; grid-gap: 20px; .item_img { background-image: url('images.unsplash.com/photo-14998…'); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } } 複製代碼

源碼：codepen.io/duomly/pen/…

7.如何將背景圖像設置爲文本顏色？

使用background-image與background-clip，能夠實現背景圖像對文字的優美效果。在某些狀況下，它可能很是有用，尤爲是當咱們想建立一個較大的文本標題而又不如普通顏色那麼枯燥的狀況。

「HTML」

<body>
  <h1>Hello world!</h1>
</body>
複製代碼

「SCSS」

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  min-height: 100vh;
  font-size: 120px;
  font-family:Arial, Helvetica, sans-serif;
}
複製代碼h1 { background-image: url("images.unsplash.com/photo-14622…"); background-clip: text; -webkit-background-clip: text; color: transparent; } 複製代碼

源碼：codepen.io/duomly/pen/…

「代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。」

原文:https://dev.to/duomly/discover-7-amazing-tips-and-tricks-about-the-css-background-image-39b0