前端:如何讓background背景圖片進行CSS自適應


在設置login背景時,找到了一張這樣的圖片:

image

但是設置成login背景時,如果沒有做一些css適應設置,圖片就變樣了,變成了這樣:

image

嚴重變形了,這就造成了一種理想與現實的差距。


若想解決這個自適應問題,其實很好解決,只需要在前端代碼里加上這樣css即可:

  1 .main {
  2   background: url(../assets/main.png) no-repeat;
  3 
  4   /**添加以下css */
  5   height: 100%; //大小設置為100%
  6   width: 100%; //大小設置為100%
  7   position: fixed;
  8   background-size: 100% 100%;
  9 }

再刷新看一下效果:

image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM