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

最新推荐文章于 2024-03-06 20:44:31 发布

韩曙亮

最新推荐文章于 2024-03-06 20:44:31 发布

阅读量3.5k

点赞数 8

分类专栏： CSS 文章标签： css html 背景颜色背景图片背景平铺

本文链接：https://blog.csdn.net/shulianghan/article/details/129431335

版权

CSS 专栏收录该内容

142 篇文章 41 订阅

订阅专栏

本文介绍了如何使用CSS设置元素的背景颜色，包括预定义颜色、十六进制和RGB代码的使用方法。接着，文章展示了如何添加背景图片，以及在url()中设置相对路径的技巧。最后，讨论了背景平铺的四种模式：默认平铺、不平铺、横向平铺和纵向平铺，帮助理解如何控制背景图像在元素内的显示方式。

摘要由CSDN通过智能技术生成

一、背景颜色

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>