加载背景图像的图像不显示

2024-05-14

我真的很困惑,我正在尝试创建一个带有图标和一些按钮的登陆页面,但我无法设法使我正在使用的背景图像显示出来,即使它是根据 Chrome 的开发工具包加载的

我只有这些行:

索引.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="row">
    <div class="tryhard">
    </div>
</div>
<!-- Chargement des scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

样式.css

.tryhard{
  background: url(../img/guitare.jpg) no-repeat center center;
  margin:0; 
  padding:0; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover; 
}

这应该足以让我的图像出现,但它不会显示在我的任何浏览器上,而我可以看到它在其他网站上运行...... 我的图像重量为 924 ko,尺寸为 2304x1536 像素...

有人有想法吗?

谢谢


由于我没有足够的声誉来发表评论,所以我将其发布在这里。

Jsfiddle https://jsfiddle.net/2wdcur80/2/

.row {
  height: <define height here>;
}

height: 100%;

height: 100% 将使其与其父元素“row”的高度相同。

Cheers

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

加载背景图像的图像不显示 的相关文章

  • 处理css浏览器兼容性的正确方法是什么?

    是为每个用户代理使用不同的 CSS 文件更好 还是使用只有某些浏览器才能看到的 CSS Hacks 更好 Neither 最好的方法是编写适用于所有浏览器的代码 而不需要特定于浏览器的代码或 CSS hack 当然 实现起来并不那么容易 这
  • 使用 CSS 在 javaFX 中设置按钮样式

    我在使用 CSS 的 javaFX 中设置按钮样式时遇到问题 我使用 Intellij Idea IDE 我有 CSS css 文件 Button fx padding 8 15 15 15 fx background insets 0 0
  • 使用 z-index 将元素定位在 div 下

    我尝试将一个子 div 放置在其父级元素下方并位于其他元素上方 box1 background color blue width 500px height 100px position relative z index 3 box2 pos
  • 调用函数值[重复]

    这个问题在这里已经有答案了 可能的重复 函数提前触发 https stackoverflow com questions 12201816 function triggering early 我已经编写了这段代码 但是当我调用函数 test
  • HTML/CSS - 使用图像作为输入类型=文件

    如何使用此图像 http h899310 devhost se proxy newProxy uplfile png http h899310 devhost se proxy newProxy uplfile png 而不是常规的
  • 内联 div 元素

    我试图将 div 元素放在一起 问题是 即使有足够的空间让两个元素位于同一行 新的 div 也会将自身移动到下一行 如果没有足够的空间 我只需要另一个 div 去到下一行 有人知道怎么做这个吗 将 CSS 显示样式设置为display in
  • div 全宽的响应式背景图像

    我正在尝试弄清楚如何在 div 全宽和响应式中制作背景图像 背景图像在页面的宽度上扩展 并且具有响应性 但图像的高度不是其完整高度 似乎它被某种方式切断了 我正在使用引导框架 我尝试这样做的原因是我想在图像上覆盖一些文本 我尝试了很多不同的
  • 使用百分比宽度进行布局时如何修复 Internet Explorer 7 错误?

    请帮助我 我需要使用百分比宽度创建布局 我有一个 100 宽度的包装纸 现在我有一个 DIV 主要包装器 我想将其保持在 94 宽度百分比 100 主体的 94 好吧 所以为了让这个简单 gt BODY 100 宽度设置 gt 容器 94
  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett
  • 如何在html中创建字体选择栏

    我想创建一个下拉菜单 在其中我们可以看到所有可用的字体 并且可以选择我们选择的任何字体 我还想创建一个字体颜色选择小部件 存在大量的字体样式 我想知道如何获取所有这些字体以及如何创建一个小部件 用户可以使用该小部件选择他选择的颜色 为了创建
  • 使用 CSS 等高列

    我想对我的 CSS 表使用百分比 不幸的是 它对我不起作用 这段代码有什么问题 我应该使用 flexbox 而不是 table 吗 我想使用表格 因为我想要相同高度的列 ul list style none margin 0 display
  • flexslider 中的 GIF 滑块,如何仅在滑块上时开始 gif

    现在我有一个带有四个幻灯片的 Flexslider 第三个滑块是 gif 而不是像其他滑块一样是 jpg 我遇到的问题是 第三个 gif 滑块显然在到达页面时立即启动 而不是在您实际到达该滑块时启动 当点击前两个滑块时 gif 就快完成了
  • 在 Chrome 上使用 html5 显示垂直视频

    我正在构建一个简单的page http jsfiddle net JVZGZ 使用 html5 视频标签显示从我的 iPhone 上传的视频 如果您使用 chrome 观看它 您可能会看到该视频是水平呈现的 尽管它不是水平呈现的 尝试下载它
  • 某些网站如何在 iOS Safari 中内嵌播放视频?

    非常令人难以置信 因为我认为所有视频都可以在常规野生动物园中扩展为全屏播放 例如检查一下 https entertainment theonion com the onion reviews rogue one 1819596116 htt
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • 当用户输入/删除时,使文本字段中的提示消失/重新出现[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有谁知道我怎样才能在我的搜索栏中做出
  • IE9 中的 HTML5 视频两侧显示黑色边框

    我在我的网站中使用 HTML5 视频标签 该视频在所有浏览器中都能完美播放 但在 IE9 中它显示黑色边框 黑色扩展名 就像通常情况下 当播放器的大小大于视频的大小时 视频播放器会在其两侧显示一些黑色扩展 这是我们使用的解决方案 对于视频
  • PHP:如何使用 nl2br() 和 HTML Purifier 保持换行?

    Issue 使用时HTML 净化器 http htmlpurifier org 为了处理用户输入的内容 换行符不会被转换为 br tags 考虑以下用户输入的内容 Lorem ipsum dolor sit amet This is ano
  • 延迟 HTML5:无效伪类直到第一个事件发生

    我最近发现 invalid伪类适用于required页面加载后立即生成表单元素 例如 如果您有以下代码
  • CSS精灵什么时候适合使用,什么时候不适合使用?

    CSS精灵在什么情况下适合使用 什么时候不适合使用 是节省时间还是仅节省服务器请求 我认为带宽使用将是相同的 因为图像与大图像相同 但它是在一个部分中 何时何地使用 css sprite 是节省时间 工作中 的选择 对于导航来说 它有利于翻

随机推荐

  • 如何在特定 systemd 服务重新启动时触发自定义脚本运行

    我想知道如何安排自定义脚本在重新启动服务时运行 我的用例是 每当重新启动 Tomcat 服务时 我都必须运行多个命令 我想知道是否有一种方法可以编写脚本并安排它在重新启动 Tomcat 服务时运行 我已将 tomcat 脚本设置为 syst
  • 有什么方法可以设置每个解决方案的颜色选项(VS2010)?

    有没有办法配置VS2010为不同的解决方案使用不同的配色方案 在 20 世纪 90 年代的 Macintosh 上 我可以将 wctb 资源添加到文档中 以便它们可以使用不同的配色方案打开 这样可以更轻松地找到要单击的正确窗口 并且还有助于
  • lessc:未找到命令

    我使用的是 OS X 8 并且是 Node LESS 的新手 我以为我之前安装了 lessc 当我转到 usr local bin 时 我看到了 lessc 但对于我的生活来说 我无法运行它 每当我运行它时 我都会看到 bash lessc
  • 劫持系统调用

    我正在编写一个内核模块 我需要劫持 包装一些系统调用 我正在暴力破解 sys call table 地址 并使用 cr0 来禁用 启用页面保护 到目前为止一切顺利 一旦完成 我将公开整个代码 因此如果有人愿意 我可以更新这个问题 无论如何
  • 在 Chrome 中加载analytics.js时出现307重定向

    我正在构建一个网络应用程序并使用 Google Analytics analytics js 进行分析 我最近注意到 Chrome 中的分析功能无法正常工作 我使用单独模块中的标准代码片段加载分析并通过 requirejs 包含 我已验证该
  • 对 boost 库的依赖项没有完整路径

    我已经成功构建了动态库 依赖于使用自定义前缀构建和安装的 boost 库 b2 install prefix PREFIX 然而 当我跑步时otool L在我的库中 我得到如下输出 libboost regex dylib compatib
  • 如何使用CSS将文本放在“框”的右上角或右下角

    我怎样才能得到here and and here位于右侧 与 lorem ipsums 位于同一行 请参阅以下内容 Lorem Ipsum etc here blah blah blah blah lorem ipsums and here
  • 对于多项式,获取其所有极值并通过突出显示所有单调部分来绘制它

    有人问我这个有趣的问题 我认为值得将其发布在这里 因为 Stack Overflow 上还没有任何相关线程 假设我有长度为的多项式系数n vector pc 其中次数多项式n 1对于变量x可以以其原始形式表示 pc 1 pc 2 x pc
  • 从 osascript/Applescript 打印到标准输出

    我有一些正在执行的 AppleScript 代码osascript 这是一个更大的 Perl 程序的一部分 我希望能够从 AppleScript 打印到标准输出 然后让 Perl 脚本处理输出 但我无法从 AppleScript 中进行打印
  • 如何在 Python 中跟踪日志文件?

    我想在 Python 中提供 tail F 或类似内容的输出 而无需阻塞或锁定 我找到了一些非常旧的代码来做到这一点here http code activestate com recipes 436477 filetailpy 但我认为现
  • 为什么 Visual Studio 编辑器在空白处显示点?

    我在 Visual Studio 文本编辑器中遇到了一个奇怪的错误 我所有的空格都被替换为 public class Person int age 看起来像这样 public class Person int age 我将设置重置为默认值
  • HttpWebRequest vs Webclient(特殊场景)

    我知道这个问题之前已经回答过thread https stackoverflow com questions 1694388 webclient vs httpwebrequest httpwebresponse 但我似乎找不到详细信息 在
  • 将包含换行符的文本文件导入到 Excel 中

    我有一个纯文本文件 如下所示 some text containing line breaks 我正在尝试说话excel 2004 Mac v 11 5 正确打开此文件 我希望只看到一个单元格 A1 包含上述所有内容 不带引号 但可惜的是
  • 使用 VBScript 重命名 IIS 中的虚拟目录?

    如何使用 VBScript 重命名 IIS 6 0 7 0 中的虚拟目录 或 Web 应用程序 如果您只想更改 IIS 7 中的站点名称 编辑applicationHost config文件 该文件可以在以下位置找到c Windows Sy
  • 无法解析远程名称 - webclient

    我面临这个错误 The remote name could not be resolved russgates85 001 site1 smarterasp net 当我请求使用 Web 客户端读取 html 内容时 出现错误 下面是我的代
  • 以 HTML 格式发送电子邮件

    我想发送 HTML 格式的电子邮件 如下图所示 我怎样才能做到这一点 请帮我 提前致谢 String body new String table tr td br header td tr br br Get b Best Score b
  • 为什么 Angular 2 项目如此大 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们正在用 ng2 重写 ng1 项目 我们的 ng1 项目构建后大约有 8mb 我们对 ng2 的重写已经完成了大约四分之一 并且我
  • Gmail 和 Google Chrome 12+ 中的“从剪贴板粘贴图像”功能如何工作?

    我注意到一个来自 Google 的博文 http gmailblog blogspot com 2011 06 pasting images into messages just got html其中提到 如果您使用的是最新版本的 Chro
  • Typescript 模块解析的根路径

    我有两个使用打字稿的项目 一个是核心项目 moduleA 另一个是业务项目 moduleB 项目B使用项目A的模块 ts文件 位于 scripts文件夹 我想通过以下方式为projectB指定模块解析根文件夹projectA scripts
  • 加载背景图像的图像不显示

    我真的很困惑 我正在尝试创建一个带有图标和一些按钮的登陆页面 但我无法设法使我正在使用的背景图像显示出来 即使它是根据 Chrome 的开发工具包加载的 我只有这些行 索引 html div class row div class tryh