Question

我是HTML和CSS的新手。我想在页面背景上添加图片，但是我不知道该怎么做。

我想将CSS保留在页面内部，以便此背景图片由页面<head>中的CSS指定：

<!DOCTYPE html>
<html>
<head>
  <h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
 background-color: rgb(60, 60, 60);
 }

h2 {
 color: white;
 font-family: arial;
 font-size: 200%;
 }

h4 {
 color: white;
 font-family: arial;
 font-size: 165%;
 }

h6 {
 color: white;
 font-family: arial;
 font-size: 125%;
 }

p {
 color: white;
 font-family: arial;
 font-size: 100%;
 }
</style>
<body>
</body>
</html>

Answer 1

您可以通过background-image CSS属性为页面背景设置图像。此处，背景图片是通过URL指定的，并应用于文档的body元素：

body {
 background-color: rgb(60, 60, 60);

 /* Add this */
 background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
 }

这是现有HTML的完整示例：

<!DOCTYPE html>
<html>
<head>
  <h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
 background-color: rgb(60, 60, 60);
 
 /* Add this */
 background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
 }

h2 {
 color: white;
 font-family: arial;
 font-size: 200%;
 }

h4 {
 color: white;
 font-family: arial;
 font-size: 165%;
 }

h6 {
 color: white;
 font-family: arial;
 font-size: 125%;
 }

p {
 color: white;
 font-family: arial;
 font-size: 100%;
 }
</style>
<body>
</body>
</html>

Answer 2

您可以使用background属性，

<body background="bgimage.jpg">

使用CSS

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

您还可以使用background速记属性，该属性可以设置包括background-image在内的不同背景属性，

body { 
  background: lightblue url("bgimage.jpg") no-repeat fixed center; 
}

使用嵌入式CSS将图像添加到背景中

2 个答案: