HTML 背景
在 HTML 中，我们可以通过内联样式或者 CSS 来为网页添加背景，这里我们主要介绍内联样式的方法。
1、单色背景
要为元素添加单色背景，可以使用 background-color 属性，为一个段落(<p>)元素添加红色背景，可以这样写：
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: red;
}
</style>
</head>
<body>
<p>这是一个红色背景的段落。</p>
</body>
</html>
2、渐变背景
要为元素添加渐变背景，可以使用 background-image 属性，并设置其值为 linear-gradient()，为一个 div 元素添加从左到右的红色到蓝色渐变背景，可以这样写：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-image: linear-gradient(to right, red, blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3、图片背景
要为元素添加图片背景，同样可以使用 background-image 属性，并设置其值为图片的 URL，为一个 div 元素添加一张名为 bg.jpg 的图片作为背景，可以这样写：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-image: url('bg.jpg');
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4、重复背景图像和位置属性设置背景图像的位置和重复方式，以下代码块将创建一个带有重复的蓝色正方形作为背景的 <div>,该正方形位于页面中心：
<!DOCTYPE html>
<html>
<head> <title></title> </head> <body style="background-position:center;"> <div style="width:50px;height:50px;background-repeat:no-repeat;background-image:url('blue_square.png')"></div> </body> </html> `` 在上面的代码中，我们使用 background-position 将背景图像定位到页面中心，我们还使用 background-repeat 将图像设置为不重复，我们使用 background-image` 将图像指定为所需的图像文件名。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/318664.html
微信扫一扫 