gpt4 book ai didi

html - Chrome 不显示 css 背景图像

转载 作者:行者123 更新时间:2023-11-27 23:20:26 25 4
gpt4 key购买 nike

我的问题是,当我在 macOS 上使用 Chrome 检查互联网上的页面时,它不显示来自 CSS 样式表的背景图像。但是,当我在 Coda 2 中检查它时,一切正常。此外,当我打开 html 文件时在 Chrome 中打开页面时它也有效。你能告诉我可能是什么问题吗,因为我已经尝试了几乎所有的方法?

http://avelitest.epizy.com/index.html

附言

我认为问题出在 CSS 中,因为起初它工作正常。

CODA 2

CHROME

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>

最佳答案

也许您应该在 html 文件中添加图像。那行得通

关于html - Chrome 不显示 css 背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58041101/

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