我的问题是，当我在macOS上使用Chrome浏览器检查互联网上的页面时，它没有显示CSS样式表中的背景图片。但是，当我在Coda 2中进行检查时，一切正常。此外，当我打开html文件时在Chrome中打开页面时，它也可以工作。您能说出问题的原因是什么，因为我已经尝试了几乎所有东西？
http://avelitest.epizy.com/index.html
P.S。
我认为问题出在CSS的某个地方，起初它运行良好。
html, body {
cursor: url(file:///htdocs/img/aperture3.png), auto !important;
}
body {
margin: 0 auto;
max-width: 100%;
}
a:link, a:visited, a:hover, a:active {
}
* {
box-sizing: border-box;
margin: 0%;
padding: 0%;
font-family: "Darker Grotesque" !important;
}
/*--------------- hero section --------------- */
.video-container {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.video-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #1b1b1b;
opacity: 0.8;
}
.header {
position: absolute;
top: 50%;
left: 40%;
transform: translate( -60%, 100%);
}
.header h1 {
color: #d3ae87;
font-size: 80px !important;
display: inline;
transform: translate;
text-align: center !important;
padding-right: -200px;
}
@media(max-width: 900px) {
.header {
left: 50%;
}
.header h1 {
font-size: 34px !important;
text-align: center;
}
}
a:hover {
text-decoration: none;
}
/*--------------- navigation --------------- */
.nav {
width: 100%;
height: 80px;
position: fixed;
z-index: 2;
}
.nav.scrolled {
width:100%;
background-color: #161616 !important;
transition: background-color 500ms linear;
}
.nav #brand {
float: left;
display: block;
margin-left: 1.5%;
line-height: 80px;
font-weight: bold;
text-transform: uppercase;
font-size: 40px;
}
.nav #brand a {
color: #fff;
font-family: Poppins !important;
transition: all 500ms ease-out;
}
.nav #brand a:hover {
text-decoration: none;
}
.nav #menu {
float: left;
right: 40px;
position: fixed;
}
.nav #menu li {
padding-left: 40px;
display: inline-block;
font-weight: lighter !important;
text-transform: uppercase;
font-size: 14px;
line-height: 80px;
position: relative;
transition: all 500ms ease-out;
}
.nav #menu li a {
font-family: sans-serif !important;
color: rgb(156, 156, 156);
transition: all 500ms ease-out;
}
.nav #menu li a:hover {
text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 15px #d3bc97;
color: white;
text-decoration: none;
transition: all 500ms ease-out;
-webkit-filter: drop-shadow(0px 0px 20px #d3bc97) ;
filter: drop-shadow(0px 0px 20px #d3bc97) ;
}
#toggle {
position: absolute;
right: 40px;
top: 20px;
font-weight: 300;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 2;
width: 30px;
height: 30px;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
.close-btn {
position: absolute;
right: 30px;
font-weight: 300;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 2;
top: -2px;
line-height: 80px;
}
.countdown {
text-decoration: none;
font-weight: 400;
filter: drop-shadow (0px 0px 5px #f24333);
-webkit-filter: drop-shadow(0px 0px 5px #f24333) ;
text-shadow: 0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
-webkit-text-shadow:0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
color:white !important;
}
#resize {
z-index: 2;
top: 0px;
position: fixed;
background: #0f0f0f;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
}
#resize #menu {
height: 90px;
position: absolute;
left: 45%;
transform: translateX(-40%);
text-align: center;
display: table-cell;
vertical-align: center;
}
#resize #menu li {
display: block;
text-align: center;
padding: 10px 0;
font-size: 50px;
text-transform: uppercase;
min-height: 50px;
font-weight: bold;
transition: all 0.3s ease-out;
}
#resize li:nth-child(1) {
margin-top: 140px;
}
#resize #menu li a {
color: #fff;
}
#resize #menu li a:hover {
text-decoration: none;
}
#resize.active {
visibility: visible;
opacity: 1;
}
@media(max-width: 900px) {
#toggle {
visibility: visible;
opacity: 1;
margin-top: 6px;
margin-right: 4px;
}
nav #brand {
margin-left: 10px;
}
#resize ul li a {
font-size: 15px;
font-family: "Poppins" !important;
font-weight: lighter !important;
color: rgb(156, 156, 156) !important;
transition: all 500ms ease-out;
}
nav #menu {
display: none;
}
}
@media(min-width: 900px) {
#resize {
visibility: hidden !important;
}
}
/*--------------- about section starts --------------- */
.content {
position: absolute;
margin-top: 100vh;
width: 100%;
}
section {
padding: 140px 0;
}
.section-index {
color: #d3ae87;
font-weight: bolder;
font-size: 20px;
font-family: 'Poppins' !important;
}
.section-heading {
color: grey;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 18px;
}
.section-subheading {
color: grey;
margin: 10px 0;
}
.section-info {
font-size: 24px;
color: grey;
}
.more {
margin: 40px 0;
}
button {
background: none;
border: .3pt solid rgba(184, 140, 93, 0.7);
text-transform: uppercase !important;
font-size: 12px !important;
letter-spacing: 2px;
padding: 18px 36px;
color: black;
}
#btn a {
text-decoration: none !important;
color: black;
}
#btn {
min-height: 50px;
padding: 0 30px;
border-radius: 0;
font-size: 12px;
text-transform: uppercase;
font-family: 'Poppins' !important;
}
/*--------------- services section starts --------------- */
.services {
background: #161616;
}
.service {
margin: 30px 0;
}
.icon ion-icon {
font-size: 36px;
color: #d3ae87;
}
.icon ion-icon:hover {
text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 200px #d3bc97;
filter: drop-shadow (0px 0px 5px #d3bc97);
-webkit-filter: drop-shadow(0px 0px 5px #d3bc97) ;
transition: 1s ease-in-out;
}
.icon-title {
font-size: 28px;
margin-bottom: 4px;
color: rgb(182, 182, 182);
font-weight: lighter;
}
/*--------------- our team section starts --------------- */
#txt {
display: inline !important;
font-size: 15px;
overflow: hidden;
}
.row{
padding-right: 7%;
}
.team-member, .team-img {
position: relative;
}
.team-img {
background: grey;
height: 400px;
width: 300px;
}
.members {
margin: 0% -15%;
}
.team-title {
margin: 20px 0px;
margin-right: -200px;
}
.team-title h5 {
font-size: 28px;
}
.team-title span {
font-size: 20px;
}
.team-member {
overflow: visible;
.team-one {
background: url ("file:///htdocs/img/FEDOR.jpg") no-repeat 50% 50%;
background-size: cover;
}
.team-two {
background: url ("file:///htdocs/img/ANDREI.jpg") no-repeat 50% 50%;
background-size: cover;
}
.team-three {
background: url ("file:///htdocs/img/ILJA.jpg") no-repeat 50% 50%;
background-size: cover;
}
/*--------------- newsletter section starts --------------- */
.newsletter {
padding: 140px 0;
background: #161616;
background: url(file:///htdocs/img/subcribe.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.newsletter input {
text-transform: uppercase;
}
.newsletter .news-data {
max-width: 650px;
margin: 0 auto;
text-align: center;
position: relative;
}
.newsletter h1 {
color: #fff;
float: center;
position: center !important;
margin-bottom: 40px;
}
.newsletter .form-control {
float: center;
position: center !important;
height: 50px;
border-color: #fff;
border-radius: 0 !important;
}
.form-control:focus {
box-shadow: none !important;
border: none !important;
}
::placeholder {
letter-spacing: 4px;
}
.newsletter .btn {
min-height: 50px;
padding: 0 30px;
border-radius: 0;
background: #000;
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
font-family: Poppins !important;
}
/*--------------- contact section starts here --------------- */
#contact-form {
margin: 5% 0;
}
.contact .icon-title {
margin-top: 10px;
color: #000;
}
#contact-form ul {
list-style: none;
margin-bottom: 40px;
border-radius: 0;
}
#contact-form li:last-of-type {
border-bottom: none;
}
#contact-form label {
display: block;
font-size: 22px;
color: rgb(97, 97, 97);
}
#contact-form input, #contact-form textarea {
width: 100%;
padding: 5px;
border: none;
resize: vertical;
background: transparent;
color: #101010;
font-weight: bolder;
}
input:focus {
outline: none !important;
border: none !important;
}
textarea:focus {
outline: none !important;
border: none !important;
}
.textarea {
border-bottom: 1px solid #c9c9c9;
}
@media(max-width: 900px) {
#contact-form {
margin: 5% 0;
width: 98%;
}
}
/*--------------- footer section starts here --------------- */
.footer {
background: #161616;
}
#media, #address, #mail {
text-align: center !important;
}
#mail a:hover {
text-decoration: none;
}
#media a:link, a:hover, a:visited {
color:white;
}
.footer .container {
padding: 160px 0;
}
.footer li, p, h4 {
font-size: 24px !important;
}
.footer h4 {
font-weight: lighter;
color: #fff;
}
.footer p {
color: grey;
font-weight: lighter;
}
.footer li {
font-weight: lighter;
color: #fff;
padding-left: 20px;
font-size: 18px !important;
}
#media ul {
list-style: none;
}
#media ul li {
display: inline-block;
}
@media(max-width: 900px) {
.footer .container {
width: 92% !important;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="PRODUCTION SHORT DESCRIPTION"/>
<meta name="keywords" content="AVELI PRODUCTION, VIDEO PRODUCTION, MUSIC VIDEOS, FILMS COMPANY, VIDEO EDITING, VFX COMPANY, AVELI, aveli, filming crew">
<title>AVELI PRODUCTION</title>
<!-- stylesheet -->
<link rel="stylesheet" href="stylesheets/style.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Darker+Grotesque:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- icons -->
<script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
<!-- for on scroll animations -->
<link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css">
<script src="https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js"></script>
</head>
<body>
<!--------------- team section starts here --------------->
<a id="team"></a>
<section class="team">
<div id="teamstar">
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s" style="margin-right: -1.000em;">03</div>
<div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s" style="margin-left:-5.000em; margin-bottom: 3.000em;">Our Founders</div>
</div>
<div class="row members">
<div class="col-md-4"></div>
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.5s" style="margin-left: -110px; margin-right: 7px;">
<div class="team-member">
<div class="team-img team-one"></div>
</div>
<div class="team-title">
<h5>Fedir Hostryi</h5>
<span>Founder/Film&SMM Area</span>
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.6s" style="margin-right: 7px;">
<div class="team-member">
<div class="team-img team-two"></div>
</div>
<div class="team-title">
<h5>Andrii Donetskyi</h5>
<span>Co-founder/Film Area</span>
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.7s" style="margin-right:-1000px;">
<div class="team-member">
<div class="team-img team-three"></div>
</div>
<div class="team-title">
<h5>Illia Ivantsov</h5>
<span>Co-founder/SMM Area</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------- team section ends here --------------->
<!--------------- newsletter section starts here --------------->
<section class="newsletter">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="news-data">
<div class="section-subheading">
<h1 class="wow fadeInUp" data-wow-delay="0.3s">Subscribe to our newsletter</h1>
</div>
<div class="input-group wow fadeInUp" data-wow-delay="0.4s">
<input type="email" class="form-control" placeholder="Enter your email">
<span class="input-group-btn">
<button class="btn" type="submit">Subscribe</button>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------- newsletter section ends here --------------->
<!--------------- contact section starts here --------------->
<a id="contact"></a>
<section class="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s">04</div>
<div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s">Contact us</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6 icon-title wow fadeInUp" data-wow-delay="0.5s">We’re here to help and answer any question you might have. We look forward to hearing from you ?</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6">
<form action="mailto:aveliproduction@gmail.com" name="contact-form" id="contact-form" method="POST">
<ul>
<li class="wow fadeInUp" data-wow-delay="0.6s">
<label for="contact-name">Name :</label>
<div class="textarea">
<input type="text" name="contact-name" id="contact-name" value="" required>
</div>
</li>
<br>
<li class="wow fadeInUp" data-wow-delay="0.7s">
<label for="contact-email">E-mail :</label>
<div class="textarea">
<input type="email" name="contact-email" id="contact-email" value="" required>
</div>
</li>
<br>
<li class="wow fadeInUp" data-wow-delay="0.8s">
<label for="contact-project">Message :</label>
<div class="textarea">
<textarea name="contact-project" id="contact-project" rows="6" required></textarea>
</div>
</li>
</ul>
<button type="submit" name="contact-submit" id="contact-submit" class="send wow fadeInUp" data-wow-delay="0.9s">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!--------------- footer starts here --------------->
<div class="footer">
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.3s" id="address">
<p>Workarea</p>
<h4>Warszawa</h4>
<h4>Zlota Tower</h4>
<h4>postal code: 00-165</h4>
<br><br>
</div>
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.4s" id="media">
<ul>
<li>
<a href="//www.facebook.com/fedor.hostryy">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="//www.facebook.com/fedor.hostryy">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li>
<a href="//www.facebook.com/fedor.hostryy">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li>
<a href="//www.facebook.com/fedor.hostryy"> </a>
<ion-icon name="logo-youtube"></ion-icon>
<a href="//www.facebook.com/fedor.hostryy"></a>
</li>
</ul>
<br><br>
</div>
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.5s" id="mail">
<p>Feel Free to Contact Us</p>
<a href="mailto:aveliproduction@gmail.com"><h4>aveliproduction@gmail.com</h4></a>
<br><br>
</div>
</div>
</div>
</div>
</div>
<!--------------- footer ends here --------------->
</div>
</div>
<script>
// audio starts here
var audio = document.getElementById("bckgmusic");
audio.autoplay = true;
audio.loop = true;
audio.volume = 0.1;
audio.load();
document.addEventListener('keydown', function(e) {
if (e.keyCode == 113) {
document.getElementById('bckgmusic').pause();
}
});
document.addEventListener('keydown', function(e) {
if (e.keyCode == 112) {
document.getElementById('bckgmusic').play();
}
});
</script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
// navigation starts here
$("#toggle").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
$("#resize ul li a").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
$(".close-btn").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
$(function () {
$(document).scroll(function () {
var $nav = $(".nav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
new WOW().init();
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
</body>
</html>
答案 0 :(得分：0)
您尝试过其他背景图片吗？有时，当我尝试在Coda 2中使用图片时，效果很好。在线查看，景气消失了。我真的不能告诉您任何有关它的信息，因为在使用其他版本的图片并再次尝试后，一切都很好。 最好的问候
答案 1 :(得分：0)
也许您应该将图像添加到html文件中。可以的
答案 2 :(得分：0)
好吧，问题是您提到的文件src
file:///htdocs/img/ILJA.jpg
，但是Chrome无法识别它，因此无法为您获取图像。因此，您需要指定从root Means目录开始的确切路径，然后是子目录，然后是文件名，例如在Windows中，您必须使用C:\xampp\htdocs\img，但您使用的就像htdocs\img
但是Coda可以识别它，因为它是一个Web开发应用程序。而且它将知道如何仅从子目录
获取图像我查看了您的网站，您有一个名为 img 的子目录，如果您想用完整的网址提及文件名，可以像这样http://avelitest.epizy.com/img/your_file_name.jpg，它将显示正确的输出< / p>
例如，您可以检查此链接 http://avelitest.epizy.com/img/FEDOR.jpg
，此链接将显示img目录http://avelitest.epizy.com/img/
中的所有图像
