个人中心
gpt4 book ai didi

javascript - css 背景图像根本不显示

转载 作者：行者123 更新时间：2023-11-28 01:34:11 25 4
gpt4 key购买 nike

我在使用 css 而不是 HTML 代码中的标签来显示背景图像时遇到了问题，而且我看不出错误在哪里。我经历了多个线程，人们建议使用“背景”而不是“背景图像”或放置“显示: block ；”到 css，将一些高度和宽度放入 <p>我正在尝试将背景图像等。没有什么能真正帮助我。如果我放置“背景颜色”选择器，<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>

有什么想法吗？

最佳答案

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

对于css，图片的路径需要相对于css文件，而不是基础html。因此，如果您的 html 在根 (/) 中，css 在 /css 中，图像在 /images 中，那么属性在CSS 需要是

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

关于javascript - css 背景图像根本不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50778701/

25 4 0
文章推荐： c++ - 线程函数无法从堆上分配的缓冲区中读取字符
文章推荐： c++ - 在 Jenkins 中运行 make 命令
文章推荐： javascript - 使用 THIS 比使用选择器更有效吗？
文章推荐： c++ - +=、-=、*=、/= 运算符的实现(复数控制台计算器)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com