gpt4 book ai didi

javascript - CSS 背景图像未显示在 Android 设备中

转载 作者:行者123 更新时间:2023-11-28 01:11:49 25 4
gpt4 key购买 nike

我是网络开发的初学者,我正在制作自己的网站。该网站可以在这里访问

https://www.shafirpl.com/

问题是当我在我的 iPhone(包括 chrome 和 safari)上或在桌面环境(例如 MacBook)上加载页面时,会显示背景图像。但是,在 Android 手机上(使用 Pixel XL 和 Samsung galaxy s8+ 测试)背景图像不会显示。更奇怪的是,我在我的 iPhone 7 plus 中使用 chrome,其中背景图像完美加载,但在 pixel xl 上使用相同的 chrome 浏览器不会加载背景图像。

我已经包含了 HTML 和 CSS 代码的相关部分。该网站正在使用快速服务器(节点 js)提供服务,我使用 Bootstrap 以及我自己的 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 %>

谢谢

最佳答案

在 reddit 上发布了同样的问题后,有人好心地指出 background-size: cover;是罪魁祸首。他/她建议将这一行添加到我的 css

background-repeat: no-repeat;

解决了这个问题。

Reddit 链接在这里

https://www.reddit.com/r/learnprogramming/comments/9az8fy/css_background_image_not_showing_up_in_android/?utm_content=full_comments&utm_medium=message&utm_source=reddit&utm_name=frontpage

谢谢你帮助我。

关于javascript - CSS 背景图像未显示在 Android 设备中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52059783/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com