html - 尝试使用内联 css 设置背景图片

标签 html css background-image

我正在建立一个基本的 html 网站。我想使用图像作为登录页面的背景。我正在尝试使用内联 css(我认为这将是最简单的......去计算)。

在我的 body 标签中,我有我想要的颜色,“darkkhaki”。但是背景图像的属性没有出现。我已经将我想要的图片上传到我的 flickr 帐户,但是不行。我确实在我的 ST3 窗口中注意到右括号以红色突出显示,但我找不到原因。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: darkkhaki;
  background-image: https://www.flickr.com/photos/132197683@N04/33747163168/in/dateposted-public("praetorian_punisher.png");
}

h1 {
  color: red;
  text-align: center;
}

我希望看到 .png 文件作为背景。不过,它不会出现。

感谢您的帮助。

最佳答案

首先,你应该这样做:

body {
  background-image: url(...);
}

其次,您尝试使用的 url 指向 HTML 页面,而不是图像本身。正确的 url 应该是 https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg

body {
  background-color: darkkhaki;
  background-image: url(https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg);
}

h1 {
  color: red;
  text-align: center;
}
<h1>Hello!</h1>

关于html - 尝试使用内联 css 设置背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55715835/

相关文章:

php - 使用 php 计算 Sql 表行并在 HTML 中显示

css - 有人知道 LESS CSS "theme sheet"吗?

java - 来自 Java 代码的 Java Swing 上的 CSS

javascript - 如何显示带有悬停效果标题的模态图像?

html - 背景图像的不透明度

javascript - CSS 和 JS - 将背景图像扩展到 div 之外

html - 设计有问题(布局未采用可用宽度)

css - 左浮动的 div 位于另一个 div 下方

javascript - 如何为每个用户处理多个 Node.js 服务器之间的通信?

css - 背景图像仅拉伸(stretch) y 轴,保持重复 x