CSS背景圖片未顯示在Android設備中
[英]CSS Background image not showing up in Android device
問題描述
我是Web開發人員的初學者，我正在創建自己的網站。 可以在這里訪問該網站
問題是，當我在iPhone（包括chrome和safari）上或在桌面環境（例如MacBook）中加載頁面時，背景圖像就會顯示出來。 但是，在android手機（已通過像素xl和Samsung galaxy s8 +測試）上，背景圖像不會顯示。 更加奇怪的是，我在iPhone 7 plus中使用了chrome，其中背景圖片完美加載，但是在像素xl上使用相同的chrome瀏覽器不會加載背景圖片。
我已經包括了HTML和CSS代碼的相關部分。 該網站使用快遞服務器（節點js）進行服務，我使用了引導程序以及自己的CSS
body{ background: url(/images/image3.jpg); background-size: cover; background-position: center; font-family: 'Lato', sans-serif; color: orange; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Shafi</title> <!-- This is the google font lato --> <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> <!-- Bootstrap Cdn --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- This is our own style sheet, we are adding it after bootstrap so that it has highest precedence compared to bootstrap, remember in css, the one comes late has more precedence --> <link rel="stylesheet" href="/stylesheets/homepage.css"> <!-- Fontawesome cdn --> <link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"> </head> <body> <!-- The navbar --> <nav class="navbar navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Shafi</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <!-- This active class will make the home appear highlighted or active --> <li class="active"><a href="/">Home</a></li> <li><a href="/about">About Me</a></li> <li><a href="/experience">Work Experience</a></li> <li><a href="/protfolio">Protfolio</a></li> <li><a href="/education">Education</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/resume" target="_blank"><i class="fas fa-file"></i> My Resume </a></li> <li><a href="/contact"><i class="fas fa-envelope"></i> Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- This is for the background image --> <div class="container"> <div class="row"> <div class="col-lg-12"> <!-- Centering everything with this div --> <div id="content"> <h1>Hello World! This Is Shafi</h1> <h3 class="bolder">Student & Passionate Software Engineer</h3> <hr> <a href="/about"><button type="button" name="button" class="btn btn-default btn-lg" href="/about"><i class="fa fa-laptop-code"></i> About Me</button></a> </div> </div> </div> </div> <% include ../partials/footer.ejs %>
謝謝
3 個解決方案
解決方案1
0 2018-08-28 14:04:42
在網址中使用引號：
body{
background: url('/images/image3.jpg');
background-size: cover;
background-position: center;
font-family: 'Lato', sans-serif;
color: orange;
}
解決方案2
0 2018-08-28 14:59:26
在reddit中發布了相同的問題之后，有人很友善地指出了background-size: cover ; 是罪魁禍首。 他/他建議將此行添加到我的css中
background-repeat: no-repeat;
哪個解決了問題。
Reddit鏈接在這里
謝謝你的協助。
解決方案3
0 2019-05-13 22:58:05
雖然問題似乎已經解決，但我認為值得提出。 花了我兩天的時間（不適用於僅Android瀏覽器）后，事實證明是由於我將背景圖像應用於flex box child。 在目標內有另一個孩子（現在這個內部元素具有背景圖像）並使它們的寬度100％解決了我的問題。 盡管可能與問題無關，但我希望這可以對遇到相同問題的人有所幫助。 有人指出，對於Android瀏覽器上的另一個問題，背景重復：不重復也能解決問題。
CSS：背景圖像未顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.