第4章:颜色和背景 --[CSS零基础入门]

在 CSS 中,颜色和背景属性是用于美化网页元素的重要工具。你可以通过多种方式定义颜色,并且可以设置元素的背景颜色、图像、渐变等。以下是关于如何在 CSS 中使用颜色和背景的一些关键点和示例。

1.颜色表示法

当然!以下是使用不同颜色表示法的 CSS 示例,包括 RGB、RGBA、HSL、HSLA 和十六进制颜色值。每种方法都有其特点和适用场景。

1. 十六进制颜色值

十六进制颜色值以 # 开头,后面跟六个十六进制数字(0-9 和 A-F),分别表示红、绿、蓝三种颜色成分。也可以用三个十六进制数字来简写。

示例:
/* 全写 */
div {background-color: #FF5733; /* 橙红色 */
}/* 简写 */
span {color: #F00; /* 红色 */
}

2. RGB 颜色

RGB 使用 rgb() 函数,其中包含三个参数,每个参数取值范围是 0 到 255 或者百分比,分别表示红、绿、蓝三种颜色成分。

示例:
p {color: rgb(255, 87, 51); /* 橙红色 */
}

3. RGBA 颜色

RGBA 是 RGB 的扩展,添加了第四个参数 alpha(透明度),取值范围是 0(完全透明)到 1(完全不透明)。

示例:
button {background-color: rgba(255, 87, 51, 0.5); /* 半透明橙红色 */
}

4. HSL 颜色

HSL 使用 hsl() 函数,包含三个参数:色调(0-360 度)、饱和度(百分比)和亮度(百分比)。

示例:
header {background-color: hsl(12, 100%, 50%); /* 橙色 */
}

5. HSLA 颜色

HSLA 是 HSL 的扩展,同样添加了 alpha 参数用于设置透明度,取值范围是 0(完全透明)到 1(完全不透明)。

示例:
footer {background-color: hsla(12, 100%, 50%, 0.75); /* 半透明橙色 */
}

这些不同的颜色表示法为网页设计师提供了极大的灵活性,可以根据设计需求选择最合适的方式。例如,在需要精确控制颜色时可以选择 RGB 或十六进制;而在处理色彩渐变或需要调整透明度时,HSL(A) 可能会更直观易用。希望这些示例能帮助你更好地理解和应用 CSS 中的颜色表示法。

2.背景颜色

当然,下面是三个使用不同颜色表示法来设置背景颜色的 CSS 示例。这些示例展示了如何使用十六进制颜色值、RGB 和 HSL 来为 HTML 元素指定背景颜色。

示例 1: 使用十六进制颜色值

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: #FFD700; /* 金色 */padding: 20px;font-family: Arial, sans-serif;
}.golden-background {background-color: #FFD700; /* 金色 */padding: 20px;border-radius: 8px;
}
</style>
</head>
<body><div class="golden-background"><h1>欢迎来到我的网站</h1><p>这个背景是用十六进制颜色值设置的。</p>
</div></body>
</html>

在这里插入图片描述

示例 2: 使用 RGB 颜色

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: rgb(79, 153, 242); /* 蓝色 */padding: 20px;font-family: Arial, sans-serif;
}.blue-background {background-color: rgb(79, 153, 242); /* 蓝色 */padding: 20px;border-radius: 8px;color: white; /* 文字颜色设为白色以提高对比度 */
}
</style>
</head>
<body><div class="blue-background"><h1>欢迎来到我的网站</h1><p>这个背景是用 RGB 颜色值设置的。</p>
</div></body>
</html>

在这里插入图片描述

示例 3: 使用 HSL 颜色

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: hsl(120, 100%, 75%); /* 绿色 */padding: 20px;font-family: Arial, sans-serif;
}.green-background {background-color: hsl(120, 100%, 75%); /* 绿色 */padding: 20px;border-radius: 8px;color: black; /* 文字颜色设为黑色以提高对比度 */
}
</style>
</head>
<body><div class="green-background"><h1>欢迎来到我的网站</h1><p>这个背景是用 HSL 颜色值设置的。</p>
</div></body>
</html>

在这里插入图片描述

每个示例都展示了一个简单的 HTML 页面,其中包含一个带有特定背景颜色的 div 元素。通过调整 background-color 属性的值,你可以轻松地改变页面中任何元素的背景颜色。这里分别使用了:

  • 十六进制颜色值:适用于需要精确颜色代码的情况。
  • RGB 颜色:适合那些希望通过数值直接控制红、绿、蓝三原色的人。
  • HSL 颜色:对于希望基于色调、饱和度和亮度调整颜色的设计者来说非常直观。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣刷题TOP101: 27.BM34 判断是不是二叉搜索树

目录&#xff1a; 目的 思路 复杂度 记忆秘诀 python代码 目的&#xff1a; 给定一个二叉树根节点&#xff0c;请判断这棵树是不是二叉搜索树。 二叉搜索树满足每个节点的左子树上的所有节点均小于当前节点且右子树上的所有节点均大于当前节点。 思路 什么是二叉搜索树&am…

linux-12 关于shell(十一)ls

登录系统输入用户名和密码以后&#xff0c;会显示给我们一个命令提示符&#xff0c;就意味着我们在这里就可以输入命令了&#xff0c;给一个命令&#xff0c;这个命令必须要可执行&#xff0c;那问题是我的命令怎么去使用&#xff0c;命令格式有印象吗&#xff1f;在命令提示符…

视觉语言模型 Qwen2-VL

视觉语言模型 Qwen2-VL flyfish from PIL import Image import requests import torch from torchvision import io from typing import Dict from transformers import Qwen2VLForConditionalGeneration, AutoTokenizer, AutoProcessor from modelscope import snapshot_dow…

learn-(Uni-app)跨平台应用的框架

使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一份代码&#xff0c;可发布到iOS、Android、Web&#xff08;包括微信小程序、百度小程序、支付宝小程序、字节跳动小程序、H5、App等&#xff09;等多个平台。 跨平台&#xff1a;Uni-app 支持编译到iOS、Android、W…

java+ssm+mysql校园物品租赁网

项目介绍&#xff1a; 使用javassmmysql开发的校园物品租赁网&#xff0c;系统包含管理员、用户角色&#xff0c;功能如下&#xff1a; 管理员&#xff1a;用户管理&#xff1b;物品管理&#xff08;物品种类、物品信息、评论信息&#xff09;&#xff1b;订单管理&#xff1…

肝了半年,我整理出了这篇云计算学习路线(新手必备,从入门到精通)

大家好&#xff01;我是凯哥&#xff0c;今天给大家分享一下云计算学习路线图。这是我按照自己最开始学习云计算的时候的学习路线&#xff0c;并且结合自己从业多年所涉及的知识精心总结的云计算的思维导图。这是凯哥精心总结的&#xff0c;花费了不少精力哦&#xff0c;希望对…

31.下一个排列 python

下一个排列 题目题目描述示例 1&#xff1a;示例 2&#xff1a;示例 3&#xff1a;提示&#xff1a;题目链接 题解解题思路python实现代码解释&#xff1a;提交结果 题目 题目描述 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3…

ISO45001职业健康安全管理体系涵盖了丰富的内容

范围与术语 适用范围&#xff1a;明确规定了该标准适用于任何有愿望建立、实施和保持职业健康安全管理体系的组织&#xff0c;旨在使组织能够通过管理体系的有效运行&#xff0c;预防和控制职业健康安全风险&#xff0c;持续改进职业健康安全绩效。术语定义&#xff1a;对职业…

【OpenCV】平滑图像

二维卷积(图像滤波) 与一维信号一样&#xff0c;图像也可以通过各种低通滤波器&#xff08;LPF&#xff09;、高通滤波器&#xff08;HPF&#xff09;等进行过滤。LPF 有助于消除噪音、模糊图像等。HPF 滤波器有助于在图像中找到边缘。 opencv 提供了函数 **cv.filter2D()**&…

springSecurity自定义登陆接口和JWT认证过滤器

下面我会根据该流程图去自定义接口&#xff1a; 我们需要做的任务有&#xff1a; 登陆&#xff1a;1、通过ProviderManager的方法进行认证&#xff0c;生成jwt&#xff1b;2、把用户信息存入redis&#xff1b;3、自定义UserDetailsService实现到数据库查询数据的方法。 校验&a…

PowerShell install 一键部署postgres17

postgres 前言 PostgreSQL 是一个功能强大的开源对象关系数据库系统,拥有超过 35 年的积极开发经验 这为其赢得了可靠性、功能稳健性和性能的良好声誉。 通过官方文档可以找到大量描述如何安装和使用 PostgreSQL 的信息。 开源社区提供了许多有用的地方来熟悉PostgreSQL, 了…

Redis——内存淘汰策略

Redis的淘汰策略是指当Redis内存使用达到上限时&#xff0c;为了腾出空间给新的数据&#xff0c;Redis会根据预设的策略来删除一些现有的数据。以下是Redis的几种主要淘汰策略&#xff1a; 1. noeviction&#xff08;默认&#xff09; 描述&#xff1a;不淘汰任何key&#xf…

如何在 IntelliJ IDEA 中为 Spring Boot 应用实现热部署

文章目录 1. 引言2. 准备工作3. 添加必要的依赖4. 配置 IntelliJ IDEA4.1 启用自动编译4.2 开启热部署策略 5. 测试热部署6. 高级技巧7. 注意事项8. 总结 随着现代开发工具的进步&#xff0c;开发者们越来越重视提高生产力的特性。对于 Java 开发者来说&#xff0c;能够在不重启…

Spring Boot中实现JPA多数据源配置指南

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;本文详细介绍了在Spring Boot项目中配置和使用JPA进行多数据源管理的步骤。从引入依赖开始&#xff0c;到配置数据源、创建DataSource bean、定义实体和Repository&#xff0c;最后到配置事务管理器和使用多数据…

如何配置Github并在本地提交代码

前提: 可以流畅访问github, 需要一些上网技巧, 这就自行处理了 申请一个github账号 Github官网地址 首先就是邮箱注册啦, github没有对邮箱的限制, 只要是能收邮件的就ok, qq邮箱, 163等都可以使用. 然后和普通注册账号一样, 一路填写需要的信息, 验证邮箱即可. 如何新增代…

详细聊聊 Spring Cloud for Amazon Web Services

Spring Cloud for Amazon Web Services&#xff08;简称 Spring Cloud AWS&#xff09;是 Spring Cloud 生态系统中用于与亚马逊网络服务&#xff08;AWS&#xff09;集成的一个重要模块。 Spring Cloud AWS 为在 AWS 上构建和部署微服务应用提供了一系列便利的功能和集成点。…

OpenAI 12Days 第二天 强化微调(RFT):推动语言模型在科学研究中的应用

OpenAI 12Days 第二天 强化微调&#xff08;RFT&#xff09;&#xff1a;推动语言模型在科学研究中的应用 文章目录 OpenAI 12Days 第二天 强化微调&#xff08;RFT&#xff09;&#xff1a;推动语言模型在科学研究中的应用RFT的工作原理与应用领域案例研究&#xff1a;基因突变…

21个Python脚本自动执行日常任务(2)

引言 作为编程领域摸爬滚打超过十年的老手&#xff0c;我深刻体会到&#xff0c;自动化那些重复性工作能大大节省我们的时间和精力。 Python以其简洁的语法和功能强大的库支持&#xff0c;成为了编写自动化脚本的首选语言。无论你是专业的程序员&#xff0c;还是希望简化日常工…

关于信号隔离转换器

isolate converter是隔离转换器‌。它是一种在电子电路中用于实现电路隔离、电压转换或信号隔离的设备‌。隔离转换器能在很多场合发挥关键作用&#xff0c;比如可以保护电路、提高安全性&#xff0c;还能帮助不同电压或信号之间的转换与传递‌。 ‌一、产品概述‌ ‌简介‌&a…

2.linux中调度kettle

一.准备转换&#xff0c;等会在linux中用 1.添加excel输入组件&#xff0c;并添加对应的文件 2.添加列拆分为多行组件 3.添加文本文件输出组件 4.保存转换 二.linux安装java 1.把jdk-8u144-linux-x64.tar.gz上传到linux的/lx目录下 2. 解压jdk包&#xff0c;然后配置环境变量…