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

精选原创

韩曙亮_ 2023-03-17 00:27:57 ©著作权

文章标签 css html 背景颜色背景图片背景平铺 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者韩曙亮_的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

一、背景颜色

1、语法说明
2、代码示例

二、背景图片

1、语法说明
2、代码示例

三、背景平铺

一、背景颜色

1、语法说明

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

background-color:颜色值;

background-color 属性可以定义文本颜色

预定义颜色 : 直接使用颜色的英文名称
十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF
RGB 代码颜色 :

数值形式 : rgb(255, 0, 0)
百分比形式 : 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>

展示效果 :

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

二、背景图片

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>