自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

我發(fā)現(xiàn)了7個關于 CSS backgroundImage 好用的技巧

作者：前端小智
開發(fā) 前端
大多數(shù)人認為背景圖像不可能有任何不尋常的地方，但經(jīng)過研究，答案并非如此。所以本文收集了七個我認為最有用的技巧，并創(chuàng)建了一些代碼示例。

本文轉(zhuǎn)載自微信公眾號「大遷世界」，轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。

背景圖像可能是我們所有前端開發(fā)人員在我們的職業(yè)生涯中至少使用過幾次的CSS屬性之一。大多數(shù)人認為背景圖像不可能有任何不尋常的地方，但經(jīng)過研究，答案并非如此。所以本文收集了七個我認為最有用的技巧，并創(chuàng)建了一些代碼示例。

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

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

  1. body { 
  2.   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'); 
  3.   background-repeat: no-repeat; 
  4.   background-position: center; 
  5.   background-attachment: fixed; 
  6.   background-size: cover; 
  7.   -webkit-background-size: cover; 
  8.   -moz-background-size: cover; 
  9.   -o-background-size: cover; 
  10. } 

[[326397]]

事例源碼：https://codepen.io/duomly/pen/xxwYBOE

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

如果我想在背景中添加一張以上的圖片怎么辦?CSS3 中可以直接 指定多個背景路徑，如下所示：

  1. body { 
  2.   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); 
  3.   background-position: center, top; 
  4.   background-repeat: repeat, no-repeat; 
  5.   background-size: contain, cover; 
  6. } 

事例源碼：https://codepen.io/duomly/pen/eYpVoJR

3. 如何創(chuàng)建一個三角形的背景圖像

另一個很酷的背景特效就是三角形背景，當我們想展示某些完全不同的選擇(例如白天和黑夜或冬天和夏天)時，這種特效就更加棒。

思路是這樣的，首先創(chuàng)建兩個div，然后將兩個背景都添加到其中，然后，第二個div使用clip-path屬性畫出三角形。

「html」

  1. <body> 
  2.   <div class="day"></div> 
  3.   <div class="night"></div> 
  4. </body> 
「css」
  1. body { 
  2.   margin: 0; 
  3.   padding: 0; 
  4. } 
  5.  
  6. div { 
  7.   position: absolute; 
  8.   height: 100vh; 
  9.   width: 100vw; 
  10. } 
  11.  
  12. .day { 
  13.   background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80"); 
  14.   background-size: cover; 
  15.   background-repeat: no-repeat; 
  16. } 
  17.  
  18. .night { 
  19.   background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); 
  20.   background-size: cover; 
  21.   background-repeat: no-repeat; 
  22.   clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh); 
  23. } 

源碼：https://codepen.io/duomly/pen/RwWQmwW

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

有時我們想在背景上添加一些文字，但有的圖片太亮，導致字看不清楚，所以這里我們就需要讓背景圖疊加一些暗樂來突出文字效果。

例如，可以通過添加粉紅橙色漸變或紅色至透明漸變來增強日落圖像，這些情況下使用疊加的漸變就很容易做到。

「css」

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

源碼：https://codepen.io/duomly/pen/rNOJgQE

5. 如何創(chuàng)建一個顏色動態(tài)變化的背景

如果你很多顏色，你想確認哪種顏色更適合背景圖片的顏色，剛動態(tài)更改背景顏色的技巧就很有用。

「css」

  1. HTML CSSResult 
  2. EDIT ON 
  3. @keyframes background-overlay-animation { 
  4.   0%   { 
  5.       background-image: 
  6.         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"); 
  7.   } 
  8.   25%  { 
  9.       background-image: 
  10.          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"); 
  11.   } 
  12.   50%  { 
  13.     background-image: 
  14.        linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%), 
  15.      url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); 
  16.   } 
  17.   100% { 
  18.     background-image: 
  19.         linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%), 
  20.         url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); 
  21.   } 
  22. } 
  23.  
  24. @-webkit-keyframes background-overlay-animation { 
  25.   0%   { 
  26.       background-image: 
  27.         linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%) 
  28.         url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); 
  29.   } 
  30.   25%  { 
  31.       background-image: 
  32.          linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), 
  33.         url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); 
  34.   } 
  35.   50%  { 
  36.     background-image: 
  37.        linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%), 
  38.      url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); 
  39.   } 
  40.   100% { 
  41.     background-image: 
  42.         linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%), 
  43.     

源碼：https://codepen.io/duomly/pen/gOavNOv

6. 如何制作網(wǎng)格背景圖像?

有時候會遇到一些需要有藝術或者攝影類的項目，他們一般要求網(wǎng)站要有藝術信息，要有創(chuàng)意。網(wǎng)絡的背景就挺有創(chuàng)意的，效果如下:

「HTML」

  1. <body> 
  2. <div class="container"> 
  3.   <div class="item_img"></div> 
  4.   <div class="item"></div> 
  5.   <div class="item_img"></div> 
  6.   <div class="item"></div> 
  7.   <div class="item"></div> 
  8.   <div class="item_img"></div> 
  9.   <div class="item"></div> 
  10.   <div class="item_img"></div> 
  11.   <div class="item"></div> 
  12.   <div class="item"></div> 
  13.   <div class="item_img"></div> 
  14.   <div class="item"></div> 
  15.   <div class="item_img"></div> 
  16.   <div class="item"></div> 
  17.   <div class="item_img"></div> 
  18.   <div class="item"></div> 
  19. </div> 
  20. </body> 
  21.  

「scss」

  1. body { 
  2.  margin: 0; 
  3.   padding: 0; 
  4. } 
  5.  
  6. .container { 
  7.   position: absolute; 
  8.   width: 100%; 
  9.   height: 100%; 
  10.   background: black; 
  11.   display: grid; 
  12.   grid-template-columns: 25fr 30fr 40fr 15fr; 
  13.   grid-template-rows: 20fr 45fr 5fr 30fr; 
  14.   grid-gap: 20px; 
  15.   .item_img { 
  16.     background-image: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80'); 
  17.   background-repeat: no-repeat; 
  18.   background-position: center; 
  19.   background-attachment: fixed; 
  20.   background-size: cover; 
  21. } 
  22. } 

源碼：https://codepen.io/duomly/pen/MWaQNWb

7. 如何將背景圖像設置為文本顏色?

使用background-image與background-clip，可以實現(xiàn)背景圖像對文字的優(yōu)美效果。在某些情況下，它可能非常有用，尤其是當我們想創(chuàng)建一個較大的文本標題而又不如普通顏色那么枯燥的情況。

「HTML」

  1. <body> 
  2.   <h1>Hello world!</h1> 
  3. </body> 

「SCSS」

  1. body { 
  2.  margin: 0; 
  3.   padding: 0; 
  4. } 
  5.  
  6. .container { 
  7.   position: absolute; 
  8.   width: 100%; 
  9.   height: 100%; 
  10.   background: black; 
  11.   display: grid; 
  12.   grid-template-columns: 25fr 30fr 40fr 15fr; 
  13.   grid-template-rows: 20fr 45fr 5fr 30fr; 
  14.   grid-gap: 20px; 
  15.   .item_img { 
  16.     background-image: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80'); 
  17.   background-repeat: no-repeat; 
  18.   background-position: center; 
  19.   background-attachment: fixed; 
  20.   background-size: cover; 
  21. } 
  22. } 

源碼：https://codepen.io/duomly/pen/wvKyVjG

 

 

責任編輯：趙寧寧 來源： 大遷世界
CSS背景圖像前端開發(fā)
相關推薦

2020-06-16 08:39:35

JavaScript圖像處理庫

2024-05-20 08:25:55

2024-04-28 12:47:03

數(shù)據(jù)業(yè)務

2021-01-26 11:16:12

漏洞網(wǎng)絡安全網(wǎng)絡攻擊

2021-10-29 11:45:26

Python代碼Python 3.

2022-11-30 09:18:51

JavaMyBatisMQ

2020-04-01 08:40:44

Vue.jsweb開發(fā)

2021-04-22 07:47:47

JavaJDKMYSQL

2024-06-03 11:43:55

2020-06-30 10:38:36

Python 開發(fā)編程語言

2021-07-10 07:40:27

Excel數(shù)據(jù)分析大數(shù)據(jù)

2023-05-17 00:22:15

2021-04-28 14:31:35

Dubbo接口日志

2022-04-26 06:43:12

文檔TCPLinux

2021-05-13 16:34:20

TCP客戶端

2024-11-08 14:18:38

2023-10-16 15:41:14

WebCSS

2021-06-02 08:00:57

WebAsyncTas項目異步

2021-04-26 05:41:32

百度網(wǎng)盤秒傳

2025-04-23 08:02:44

點贊
收藏

51CTO技術棧公眾號