程序员经验分享-hwhale

CSS 背景 URL

2024-03-11

有人可以帮助解释一下背景图像的 CSS URL 到底是如何工作的吗？ CSS 到底如何知道从哪里开始查找 URL？例如我有这 3 个 URL

#web_content{ background: URL(images/background.jpg); }
#web_content{ background: URL(/images/background.jpg); }
#web_content{ background: URL(localhost:1234/newWebSite/images/background.jpg); }

我在不同的电脑上尝试了所有这 3 个。使用相同版本和所有内容的相同网络浏览器。基本上唯一不同的是它运行的电脑。使用第一个示例时，它仅在一台 PC 上显示，第二个示例在 2 台 PC 上显示，第三个示例在所有 PC 上显示......但当然，在现实生活中使用它作为 URL 是行不通的。有人可以详细解释一下 URL 如何找到该文件吗？


第一个说要寻找imageCSS 文件所在目录下的文件夹，然后指出background.jpg file.

第二个说进入root文件夹，然后查找image文件夹，然后查找名为的文件background.jpg.

第三个说去domain然后调查newWebSite文件夹然后在image文件夹然后指出该文件background.jpg.

使用什么 URL 以及何时使用完全取决于目录的结构。如果你的CSS and Image文件夹位于同一目录中，那么您可以像这样编写 URL：

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

The ../这里将告诉 CSS 文件返回一个目录，然后进入image folder.

If your image文件夹是 的子目录css文件夹，那么你可以这样写：

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

如果你想包含来自其他网站的文件，那么你可以这样写：

background-image: url(http://www.example.com/background.jpg);

如果您想找到网站根目录中的文件夹，那么您可以这样写：

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

The /这里的第一个表示进入第一个父目录的 URL，然后查找image folder.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

URL

hyperlink

path

relativePath

CSS 背景 URL 的相关文章

  • chrome 中选择选项元素的额外填充

    我有一个选择元素 用户可以在其中选择分类和描述 仅在 Chrome 浏览器中 我有一个额外的填充 无法使用 padding 0 或其他 css 标签删除它 Chrome 的屏幕 https i stack imgur com m3iIb p

  • 电子邮件链接在 Android 上不起作用

    我有 HTML 格式的点击电子邮件链接的代码 它在我的电脑上运行良好 但在移动设备上不起作用 我只有 Android 所以我不知道问题是否仅在 Android 上或所有移动设备上 当我按下链接时 浏览器显示 网页无法显示 邮寄至 电子邮件受

  • 是否可以设置输入文本值的样式？

    我想知道是否可以设置输入框值的样式 such http jsfiddle net aCwhY as

  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her

  • 如何在bootstrap中默认隐藏侧边栏？

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst

  • 如何将大于整个页面 100% 的元素居中对齐？

    我有一个宽度为 100 的 div 并且隐藏了一个宽度为 3000px 的 div 我希望3000px的div左右均匀地被切断 我会使用背景位置 中心 然而 事情比这更复杂 3000px div 包含 30 100px div 我尝试过在

  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就

  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码

  • 如何在jqplot中显示饼图之外的标签？

    Jqplot 有如下图表 jqplot 图表 http www jqplot com tests pie donut charts php 我的问题是如何在 a 之外显示标签jqplot chart像下面这样high chart 高图表可以

  • 设置浏览器窗口最小化的最小尺寸限制？

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用

  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads

  • 沿着预定路径移动图像？

    是否可以通过按下 iphone SDK 中的按钮来将图像设置为沿着预定路径运动 我不是在寻找任何奇特的东西 我正在研究一个简单的概念 但这会节省大量动画工作 是的 您可以通过创建一个路径来为任何 CALayer 制作动画CAKeyframe

  • 防止浮动换行，直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在

  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div

  • 如何为背景图像添加边距？

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎

  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使

  • WPF - 路径几何...有没有办法绑定数据属性？

    我有一个ControlTemplate作为 气泡 弹出窗口AdornerLayer给定的控制 它工作正常 但我需要能够计算它应该显示的位置 中间 底部 代替

  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t

  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG

  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

随机推荐

  • 通过 websockets 发送 popen 的输出

    我使用 popen 和 fgets 异步读取 tcpdump 的输出 下面的代码应该在命令行中运行 而不是使用 apache 并在浏览器中查看它 handle popen tcpdump nnX r while true output fg

  • CSS：在绝对定位的div之后有一个div

    我想知道如何做到这一点 我当前的标记如下 div div class widget style width 313px height 269px Hello div div class widget style width 80px hei

  • Kotlin 用于基于 Cordova/Ionic 的插件

    是否可以使用 Kotlin 作为框架 语言作为 Cordova 插件 第一个问题是它没有复制 kt 文件 因为它查找 java 或 xml 如果是这样 有人知道如何设置的参考吗 最近我一直在 Cordova 插件中使用 Kotlin 但是当

  • 可以使用webpack分别生成CSS和JS吗？

    I have 我想要捆绑的 JS 文件 我想要编译为 CSS 的 LESS 文件 将 imports 解析为单个包 我希望将它们指定为两个单独的输入并具有两个单独的输出 可能通过 extract text webpack plugin We

  • 如何在netbeans中运行php文件

    我创建了一个扩展名为 php 的文件 那么我应该如何使用 netbeans 运行这个文件 我已经下载了带有所有捆绑功能的 netbeans 6 8 我已经看到 php 文件可以与 netbeans 一起运行 所以我想问一下 请解释一下 运行

  • SQL 中的多个 LIKE 语句

    我有一个包含有关零售商店信息的表 我有一个零售连锁店名称列表 沃尔玛 塔吉特 伊顿等 当用户选择一个时 我基本上会运行一个查询来查找与该连锁店有关的任何信息 SELECT FROM stores WHERE store name LIKE

  • 如何使用 dotnet test 命令发布结果

    我有一个用 dotnet core 编写的测试项目 这需要以 XML 或 HTML 格式发布结果 有没有办法使用相同的命令将结果发布到特定目录 result directory不适合我 你可以看到所有dotnet test通过执行选项dot

  • 在嵌入式 vimeo 播放器上添加覆盖层

    这是我嵌入到我的网站中的视频 Fiddle https jsfiddle net hgtvqatm 问题是 它很小 并且播放和其他按钮覆盖了半个屏幕 那么有什么方法可以在播放器上添加图层图像 当您单击该图像时 视频应该开始播放 http c

  • Jvectormap突出显示多个国家

    我目前正在使用J向量图 http jvectormap com 并试图在将鼠标悬停在文本上时突出显示多个国家 我已经达到了这样的程度 如果我将鼠标悬停在 非洲 一词上 它将突出显示整个地图 当我将鼠标悬停在内容上时 我将如何过滤它以仅突出显

  • 我应该如何从json字符串中读取数据？ iPhone

    我有一个NSString van 1 312 vuan 12 123 为了获得每个键的值 我这样做 NSData data1 jsonResponse1 dataUsingEncoding NSUTF8StringEncoding json

  • 如何修复“[08S01]通信链路故障最后一个数据包成功发送到服务器是在 0 毫秒前。”

    我正在使用 PhpStorm DataGrip MySQL WAMP 开发一个 PHP 项目 从那时起 我就可以使用这些配置正常使用远程数据库 参见图片 但突然我收到这个错误 08S01 通信链路故障 最后一次成功发送到服务器的数据包是在

  • 当表无法返回值时，如何抓取表？ （美汤）

    以下是我的代码 import numpy as np import pandas as pd import requests from bs4 import BeautifulSoup stats page requests get htt

  • 父窗口是否可以通知子窗口是否已关闭？

    I have parent window opener and child popup parent gt opens popup child 假设 在父页面中 我有 js 函数hello 为了让子窗口在子窗口关闭时调用父窗口的 hello

  • 如何正确包含 cordova 插件的外部 jar 文件？

    我正在尝试制作一个简单的 cordova android 插件 它需要在 jar 文件中定义的类 我有一个测试项目here https github com konsumer testpebble 其中包括示例用法和我的插件的简化版本 在我

  • 在 Powershell 中复制整个文件夹结构，无需重新创建根文件夹

    我有一个像这样的源文件夹 source folder gt sub folder1 gt sub folder2 gt sub folder3 where sub folder1 sub folder2 and sub folder3自己有

  • 在 Weka 中对单实例进行分类

    我使用 WEKA gui 训练并创建了 J48 模型 我将模型文件保存到我的计算机上 现在我想用它对我的 Java 代码中的单个实例进行分类 我想获得对属性 簇 的预测 我所做的如下 public void classify double

  • 错误：隐式常量转换中溢出 [-Werror=overflow]

    错误 隐式常量转换中溢出 Werror overflow include

  • 机器人框架：有没有办法编写动态测试用例？

    我对机器人框架很陌生 我想动态创建测试用例 而无需输入键值驱动方法 发现一些材料提出以下建议 suite TestSuite Example suite doc tc TestCase Example test tc add step Te

  • 从子文档数组中检索字段值

    我有一些这样的文件 hash 14a076f9f6cecfc58339330eeb492e267f63062f6d5f669c7cdbfecf9eb4de32 started services deleted files software

  • CSS 背景 URL

    有人可以帮助解释一下背景图像的 CSS URL 到底是如何工作的吗 CSS 到底如何知道从哪里开始查找 URL 例如我有这 3 个 URL web content background URL images background jpg w

热门标签