当前位置：首页 > news >正文

【CSS】CSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )

news 2025/9/14 1:21:06

文章目录

一、背景颜色
- 1、语法说明
- 2、代码示例
二、背景图片
- 1、语法说明
- 2、代码示例
三、背景平铺

一、背景颜色

1、语法说明

CSS 的背景颜色样式语法 : 默认的背景颜色是 transparent 透明 ;

background-color:颜色值;

background-color 属性可以定义文本颜色 , 其颜色值有三种表示方式 :

预定义颜色 : 直接使用颜色的英文名称 , blue , red , green ;
十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF 蓝色 ; 该写法最常用 ;
RGB 代码颜色 :
- 数值形式 : rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)
- 百分比形式 : rgb(100%, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%)

2、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>背景颜色</title><base target="_blank"/><style>/* 设置背景颜色 */.background {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="background">背景颜色测试</div>
</body>
</html>

展示效果 :

在这里插入图片描述

二、背景图片

1、语法说明

CSS 的背景图片样式语法 : 背景图片的链接需要写在 url() 中 , 并且 url() 中的链接可以没有双引号 ;

background-image: url(相对路径);

在 url() 中设置相对链接
url() 中的链接没有双引号

2、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>背景图片</title><base target="_blank"/><style>/* 设置背景图片 */.background {width: 200px;height: 200px;color: white;/* 背景图片设置 1. 在 url() 中设置相对链接2. url() 中的链接没有双引号*/background-image: url(images/image.jpg);}</style>
</head>
<body><div class="background">背景图片测试</div>
</body>
</html>