zoukankan      html  css  js  c++  java
  • html background-image 图片打开失败的原因

    写网页的时候遇到一个问题,在样式表里面引用background-image,没有出现效果。查了一下是提取图片的路径不对,记录下遇到问题以及解决方法。

    1、系统自带url 引号问题

      这个最坑,以为系统就是god,结果神打盹了。

     系统自带url使用双引号:<div style="height: 213px; 150px;background-image: url("../Picture/a4.jpg")"></div>   
     系统自带url使用单引号<div style="height: 213px; 150px;background-image: url('../Picture/a4.jpg');"></div>

       这个问题是我在Mac版Pycharm上编写时遇到的,不确定在其他设备上是否存在。

    2、图片与不在同一个目录

      所有图片都放在Picture目录,所有h5文件都放在Thirteen目录,Picture目录和Thirteen目录的父目录为PythonStudy。

      成功方法:使用相对路径:<div style="height: 213px; 150px;background-image: url('../Picture/a4.jpg');"></div>

      失败方法:使用绝对路径:<div style="height: 213px; 150px;background-image: url('/PythonStudy/Picture/a4.jpg');"></div>  

    3、图片目录与h5文件在同一个父目录

      失败的方法1:不会报错,但是找不到图片:<div style="height: 213px; 150px;background-image: url('/Picture/a4.jpg');"></div>

          失败的方法2:注意html文件的位置:<div style="height: 213px; 150px;background-image: url('../a4.jpg');"></div>

      失败的方法:不会报错,但是找不到图片:<div style="height: 213px; 150px;background-image: url('Picture/a4.jpg');"></div>

     总结:注意图片与文件的相对位置。

  • 相关阅读:
    "Principles of Reactive Programming" 之<Actors are Distributed> (3)
    Clojure语法学习-循环
    建立Clojure开发环境-使用IDEA和Leiningen
    速查笔记(Linux Shell编程<上>)
    Exception thrown in catch and finally clause
    linux fork的缺点
    redhat6.4 install 163 source
    linux /etc/hosts 配置问题
    linux sed
    STL 源码分析 (SGI版本, 侯捷著)
  • 原文地址:https://www.cnblogs.com/z977690557/p/11956918.html
Copyright © 2011-2022 走看看