Question

我在使用css而不是HTML代码中的标签时遇到了显示背景图像的麻烦，我看不出错误在哪里。我经历了多个线程，人们建议使用'background'而不是'background-image'或者'display：block;'到css，给<p>加上一些高度和宽度我试图将背景图像等等。什么都没有帮助我。如果我放置'background-color'选择器，<p>会做出反应，但我无法看到背景图像。我试图摆脱js代码以查看是否有一些碰撞，并试图完全摆脱css并将背景图像直接放在html中，也没有显示出来。我确定我的相对路径写得正确。

    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
      var mySrc = myImage.getAttribute('src')
      if(mySrc === 'images/gang.jpg') {
        myImage.setAttribute ('src','images/gang2.jpg');
      } else {
        myImage.setAttribute ('src','images/gang.jpg');
      }
    }
    
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
    
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Tortoises are cool as fuck, ' + myName;
    }
    
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Tortoises are cool as fuck, ' + storedName;
    }
    
    myButton.onclick = function() {
      setUserName();
    }

    html {
      font-size: 20px;
      font-family: 'Questrial', sans-serif;
      background-color: #6b4e15;
      color: #332e27;
    }
    
    body {
      width: 600px;
      margin: 0 auto;
      background-color: #eabe69;
      padding: 0 20px 20px 20px;
      border: 5px solid black;
    }
    
    img {
      display: block;
      margin: 0 auto;
      width: 100%
    }
    
    h1 {
      margin: 0;
      padding: 20px 0;
      color: #6b4e15;
      text-shadow: 3px 3px 2px black;
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0px;
    }
    
    a {
      text-decoration: none;
      color: #332e27;
      border: 1px solid #332e27;
      border-radius: 5px;
      padding-left: 7px;
      padding-right: 7px;
      margin: 0 0 0 0;
    }
    
    a:hover {
      color: #eabe69;
      background-color: #332e27;
      border: 1px solid #332e27;
      border-radius: 5px;
      transition-duration: 0.4s;
    }
    
    address {
      text-align: center;
    }
    
    #squirtel {
      background-image: url('./images/pokemon.png');
      width: 1000;
      height: 1000;
    }

    <!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='utf-8'>
      <title> Tortoise is cool </title>
      <link rel='stylesheet' href='styles/style.css' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Questrial' rel="stylesheet">
      <meta name='author' content='Jan Jansa'>
      <meta name='description' content='The best page about tortoises'>
      <meta property='og:image' content='images/gang.jpg'>
      <meta property='og:description' content='Ahoj tohle je zelvi stranka o zelvach a je hodne v pohode'>
      <meta property='og:title' content='Hey! Tortoise is cool!'>
      <meta property='og:type' content='website'>
      <meta property='og:site_name' content='Hey! Tortoises are cool!'>
      <meta property='og:url' content='https://jankko7.github.io/'>
      <link rel='shortcut icon' href='favicon.ico' type='image/x-icon'>
    </head>
    <body>
      <h1> Tortoise is cool! </h1>
      <img src='images/gang.jpg' alt='Four little tortoises on white stone lying with their bellies up'>
      <p> <a href='#changeuser'> Tortoises are: </a></p>
      <ul>
        <li> Cool </li>
        <li> Osinka </li>
        <li> Ferda </li>
      </ul>
      <p id='squirtel'> <a href='https://en.wikipedia.org/wiki/Marginated_tortoise' target='_blank'>
        The marginated tortoise (Testudo marginata) </a>
        is a species of tortoise found in Greece, Italy and the Balkans in southern
        Europe. It is the largest European tortoise, reaching a weight of up to 5 kg (11 lb) and
        a length of 35 <abbr title='centimeters'>cm</abbr> (14 <abbr title='inches'>in</abbr>). Its shell is oblong and has a notable thickness
        around the middle of the body. The posterior end of the shell has
        a saw-like formation, flanged outward <strong>like a bell</strong>. The carapaces of adult
        specimens are almost completely black, with yellow highlights. The front
        sides of the limbs are covered with large scales. The tail is notable for
        a lengthwise marking and for an undivided carapace over the tail.
        The marginated tortoise is herbivorous, and hibernates for the winter.
        The Marginated Tortoise is recorded for the first time from Turkey, from
        the delta of the Küçük Menderes River which is less than 250 <abbr title='kilometers'>km</abbr> away from
        the closest known area in Greece.
      </p>
      <h2> Tortoise X Turtle X Blastoise </h2>
      <dl>
        <dt> <a href='images/tortoise.jpg'>Tortoise</a></dt>
        <dd> a reptile with shield living on <strong>a dry land</strong>. </dd>
        <dt> <a href='images/turtle.jpg'>Turtle</a></dt>
        <dd> a reptile with shield living in <strong> a sea </strong> or <strong> an ocean </strong>.</dd>
        <dt> <a href='images/blastoise.png'>Blastoise</a></dt>
        <dd> a reptile with a shield and ability to <strong> hydro blast </strong> you to the flippin sky. </dd>
      </dl>
      <button id='changeuser'> Change User </button>
      <h2> Contact me </h2>
      <p> You can <a href='mailto:jan.jansa95@gmail.com?cc=jan.jansa@icloud.com&subject=Let%20me%20ask%20you%20bout%20turtles%20bro!&body=Hi%20friend%20let%20me%20ask%20you%20this%2C%0B%0B'>
        mail me </a> about some more tortoise info!
      </p>
      <p><address> &copy; Jan Jansa </address></p>
      <script src='scripts/main.js'></script>
    </body>
    </html>

请问任何想法？

Answer 1

为了完整起见，我发布了我的评论作为答案，因为它解决了OP的问题。

对于css，图像的路径需要相对于css文件，而不是基本的html。因此，如果您的html位于根目录（/）中，则css位于/css且图片位于/images中，那么css中的属性需要

background-image: url(../images/image.jpg)

css背景图片根本没有显示

1 个答案: