日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
我發(fā)現(xiàn)了7個(gè)關(guān)于CSSbackgroundImage好用的技巧

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

根河ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

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

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

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

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

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

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

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

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

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

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

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

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

「html」

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   
 
  •   
    •  
  •  

    • 「css」 

     
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.   margin: 0; 
      3. 
  
  
  
  
    3.   padding: 0; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. div { 
      7. 
  
  
  
  
    7.   position: absolute; 
      8. 
  
  
  
  
    8.   height: 100vh; 
      9. 
  
  
  
  
    9.   width: 100vw; 
      10. 
  
  
  
  
    10. } 
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12. .day { 
      13. 
  
  
  
  
    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. 
  
  
  
  
    14.   background-size: cover; 
      15. 
  
  
  
  
    15.   background-repeat: no-repeat; 
      16. 
  
  
  
  
    16. } 
      17. 
  
  
  
  
    17.  
      18. 
  
  
  
  
    18. .night { 
      19. 
  
  
  
  
    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. 
  
  
  
  
    20.   background-size: cover; 
      21. 
  
  
  
  
    21.   background-repeat: no-repeat; 
      22. 
  
  
  
  
    22.   clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh); 
      23. 
  
  
  
  
    23. } 
      24.

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

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

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

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

    「css」

     
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.   background-image: 
      3. 
  
  
  
  
    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. 
  
  
  
  
    4.     url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"); 
      5. 
  
  
  
  
    5.   background-size: cover; 
      6. 
  
  
  
  
    6.   background-repeat: no-repeat; 
      7. 
  
  
  
  
    7.   background-attachment: fixed; 
      8. 
  
  
  
  
    8.   background-position: center 
      9. 
  
  
  
  
    9. } 
      10.

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

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

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

    「css」

     
 
 
 
      
  
  
  
  
    1. HTML CSSResult 
      2. 
  
  
  
  
    2. EDIT ON 
      3. 
  
  
  
  
    3. @keyframes background-overlay-animation { 
      4. 
  
  
  
  
    4.   0%   { 
      5. 
  
  
  
  
    5.       background-image: 
      6. 
  
  
  
  
    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. 
  
  
  
  
    7.   } 
      8. 
  
  
  
  
    8.   25%  { 
      9. 
  
  
  
  
    9.       background-image: 
      10. 
  
  
  
  
    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. 
  
  
  
  
    11.   } 
      12. 
  
  
  
  
    12.   50%  { 
      13. 
  
  
  
  
    13.     background-image: 
      14. 
  
  
  
  
    14.        linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%), 
      15. 
  
  
  
  
    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. 
  
  
  
  
    16.   } 
      17. 
  
  
  
  
    17.   100% { 
      18. 
  
  
  
  
    18.     background-image: 
      19. 
  
  
  
  
    19.         linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%), 
      20. 
  
  
  
  
    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. 
  
  
  
  
    21.   } 
      22. 
  
  
  
  
    22. } 
      23. 
  
  
  
  
    23.  
      24. 
  
  
  
  
    24. @-webkit-keyframes background-overlay-animation { 
      25. 
  
  
  
  
    25.   0%   { 
      26. 
  
  
  
  
    26.       background-image: 
      27. 
  
  
  
  
    27.         linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%) 
      28. 
  
  
  
  
    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. 
  
  
  
  
    29.   } 
      30. 
  
  
  
  
    30.   25%  { 
      31. 
  
  
  
  
    31.       background-image: 
      32. 
  
  
  
  
    32.          linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), 
      33. 
  
  
  
  
    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. 
  
  
  
  
    34.   } 
      35. 
  
  
  
  
    35.   50%  { 
      36. 
  
  
  
  
    36.     background-image: 
      37. 
  
  
  
  
    37.        linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%), 
      38. 
  
  
  
  
    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. 
  
  
  
  
    39.   } 
      40. 
  
  
  
  
    40.   100% { 
      41. 
  
  
  
  
    41.     background-image: 
      42. 
  
  
  
  
    42.         linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%), 
      43. 
  
  
  
  
    43.     
      44.

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

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

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

    「HTML」

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
     
  •   
    •  
  •   
    •  
  •   
    •  
  •   
    •  
  •   
    •  
  •   
    •  
  •   
    •  
  •   
    •  
  •   
    •  
  •    
  •    
  •    
  •    
  •    
  •    
  •  
  •  
  •  

    • 「scss」

     
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.  margin: 0; 
      3. 
  
  
  
  
    3.   padding: 0; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. .container { 
      7. 
  
  
  
  
    7.   position: absolute; 
      8. 
  
  
  
  
    8.   width: 100%; 
      9. 
  
  
  
  
    9.   height: 100%; 
      10. 
  
  
  
  
    10.   background: black; 
      11. 
  
  
  
  
    11.   display: grid; 
      12. 
  
  
  
  
    12.   grid-template-columns: 25fr 30fr 40fr 15fr; 
      13. 
  
  
  
  
    13.   grid-template-rows: 20fr 45fr 5fr 30fr; 
      14. 
  
  
  
  
    14.   grid-gap: 20px; 
      15. 
  
  
  
  
    15.   .item_img { 
      16. 
  
  
  
  
    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. 
  
  
  
  
    17.   background-repeat: no-repeat; 
      18. 
  
  
  
  
    18.   background-position: center; 
      19. 
  
  
  
  
    19.   background-attachment: fixed; 
      20. 
  
  
  
  
    20.   background-size: cover; 
      21. 
  
  
  
  
    21. } 
      22. 
  
  
  
  
    22. } 
      23.

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

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

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

    「HTML」

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
      Hello world!
       
      3. 
  
  
  
  
    3.  
      4.

    「SCSS」

     
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.  margin: 0; 
      3. 
  
  
  
  
    3.   padding: 0; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. .container { 
      7. 
  
  
  
  
    7.   position: absolute; 
      8. 
  
  
  
  
    8.   width: 100%; 
      9. 
  
  
  
  
    9.   height: 100%; 
      10. 
  
  
  
  
    10.   background: black; 
      11. 
  
  
  
  
    11.   display: grid; 
      12. 
  
  
  
  
    12.   grid-template-columns: 25fr 30fr 40fr 15fr; 
      13. 
  
  
  
  
    13.   grid-template-rows: 20fr 45fr 5fr 30fr; 
      14. 
  
  
  
  
    14.   grid-gap: 20px; 
      15. 
  
  
  
  
    15.   .item_img { 
      16. 
  
  
  
  
    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. 
  
  
  
  
    17.   background-repeat: no-repeat; 
      18. 
  
  
  
  
    18.   background-position: center; 
      19. 
  
  
  
  
    19.   background-attachment: fixed; 
      20. 
  
  
  
  
    20.   background-size: cover; 
      21. 
  
  
  
  
    21. } 
      22. 
  
  
  
  
    22. } 
      23.

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


    網(wǎng)頁題目：我發(fā)現(xiàn)了7個(gè)關(guān)于CSSbackgroundImage好用的技巧
    當(dāng)前路徑：http://www.dlmjj.cn/article/dhhjdgg.html

    其他資訊