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

斯巴达高尔夫

我是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>

达克里·丹尼

您可以通过background-imageCSS属性为页面的背景设置图像。在此，通过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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。