Chrome не показывает css background-img - PullRequest
Новая
       68

Chrome не показывает css background-img

0 голосов
/ 21 сентября 2019

Моя проблема в том, что когда я проверяю страницу в Интернете с Chrome на macOS, он не показывает фоновые изображения из таблицы стилей CSS.Однако, когда я проверяю это в Coda 2, все работает нормально.Более того, это работает, когда я открываю страницу в Chrome, когда я открываю HTML-файл.Вы можете просто сказать, в чем может быть проблема, потому что я перепробовал почти все?

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

PS

Я думаю, что проблема где-то в CSS причина вСначала это работало нормально.

CODA 2

ХРОМ 

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>

Ответы [ 3 ]

0 голосов
/ 21 сентября 2019

Может быть, вы должны добавить изображения в HTML-файл.Это будет работать

0 голосов
/ 21 сентября 2019

Ну, проблема в том, что вы упоминаете file src вот так

file:///htdocs/img/ILJA.jpg

, но Chrome не распознает его, поэтому он не может получить изображениедля тебя.Таким образом, вам нужно указать точный путь из корневого каталога средств, за которым следует подкаталог, а затем имя файла, например, в Windows вы должны использовать C:\xampp\htdocs\img, но вы используете его как просто htdocs\img

Но Codaможет распознать это, потому что это приложение для веб-разработки.И он будет знать, как получить изображение только из подкаталога

Я посмотрел на вашем сайте, у вас есть подкаталог с именем img , если вы хотите указать имя файла с полным URL, вы можетесделайте так http://avelitest.epizy.com/img/your_file_name.jpg это покажет правильный вывод

Например, вы можете проверить эту ссылку http://avelitest.epizy.com/img/FEDOR.jpg

и по этой ссылке будут отображаться все изображения в каталоге img http://avelitest.epizy.com/img/

0 голосов
/ 21 сентября 2019

Вы пробовали разные фоновые картинки?Иногда, когда я пытался использовать картинку в Coda 2, она работала нормально.смотреть онлайн и бум , ушел.Я действительно ничего не могу вам сказать об этом, так как все вышло хорошо после использования другой версии изображения и повторной попытки.С наилучшими пожеланиями

...