html - 从外部 css 文件到 html 实现背景图像(链接到网站 url)

标签 html css

我在将外部 css 程序(特别是来自 url 的背景图像)引用到我的 html 文件时遇到问题。我能够在内部实现 css,所以链接到网站的 url 不是问题。我看过类似的帖子谈论类似的情况,但我无法从他们那里解决我的问题。我对此很陌生,所以我猜这可能是非常愚蠢和简单的事情,但几个小时后我必须承认失败并屈服于无所不知的在线社区。 所以,这是我的 Practice.css 代码:

body{
background-color: whitesmoke;
background-image: url("https://static.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg");
background-repeat: no-repeat;
background-size: 1400px 750px;}

这是我的 Practice.html 代码:

<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/Practice.css"/>
</head>
<body>
</body>
</html>

“CSS”是 Practice.css 所在文件夹的名称。 提前致谢。

最佳答案

您的 css 文件可以位于网络上的任何其他位置。但是当您处理直接在计算机上引用的文件时,您可能会遇到一些问题。

为确保一切正常,请尝试确保您的 css 文件夹与 html 索引文件的根目录不同。

但是你的具体情况你的 CSS 链接应该是

<link rel="stylesheet" type="text/css" href="../CSS/Practice.css"/>

一旦 HTML 文件夹和 CSS 文件夹共享同一个根目录,html 文件和 css 文件将直接断开连接。该路径应首先指向 HTML 和 CSS 文件夹所在的根目录,即 ../ 然后指向 css 文件夹和文件 ../CSS/Practice.css

关于html - 从外部 css 文件到 html 实现背景图像(链接到网站 url),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35471990/

相关文章:

jquery - 使用 jQuery 或 CSS 将表格一分为二

javascript - 如何去掉 anchor 的onclick事件?

html - 使用 CSS 图像定位和屏幕分辨率,我怎样才能最好地定位这张图片?

javascript - 获取可拖动元素的实时位置

html - 位置 : absolute inside inline position:relative? 是否有替代方案

css - ATOM - CSSLINT 忽略 ids

javascript - 基于复选框在 iframe 上传递 URL

html - 使下拉菜单的宽度动态

javascript - 单击页面中的任意位置关闭子菜单下拉菜单

css - 如何在两个 960.gs 框之间添加垂直线?