在css设置的背景的图像根本不显示怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (125)

我在使用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>

有什么想法吗?

提问于
用户回答回答于

对于CSS,图像的路径需要相对于CSS文件,而不是基本的html。因此,如果html位于根目录中(/),CSS在/css图像在/images,则CSS中的属性必须是

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

扫码关注云+社区

领取腾讯云代金券