3. CSS的色彩与背景

3.1 CSS3中的色彩

CSS3扩展了颜色的定义方式,使得开发者能够使用更多样化和灵活的颜色表达方式。这包括RGB、RGBA、HSL、HSLA等格式,以及支持透明度和渐变的特性。

3.1.1 颜色格式

十六进制颜色

十六进制颜色是最常用的颜色表示法,以#开头,后面跟随三位或六位十六进制数。

/* 三位十六进制颜色 */
.element {background-color: #f00; /* 红色 */
}/* 六位十六进制颜色 */
.element {background-color: #ff0000; /* 红色 */
}
RGB颜色

RGB颜色格式使用红、绿、蓝三个颜色分量来定义颜色。

.element {background-color: rgb(255, 0, 0); /* 红色 */
}
RGBA颜色

RGBA颜色是在RGB基础上增加了透明度(Alpha)通道,值范围为0到1。

.element {background-color: rgba(255, 0, 0, 0.5); /* 50%透明的红色 */
}
HSL颜色

HSL颜色格式使用色相(Hue)、饱和度(Saturation)和亮度(Lightness)三个分量来定义颜色。

.element {background-color: hsl(0, 100%, 50%); /* 红色 */
}
HSLA颜色

HSLA颜色是在HSL基础上增加了透明度(Alpha)通道。

.element {background-color: hsla(0, 100%, 50%, 0.5); /* 50%透明的红色 */
}

3.1.2 透明度

CSS3引入了 opacity 属性,可以设置元素的透明度。

/* 设置元素的透明度为50% */
.element {opacity: 0.5;
}

3.1.3 渐变

CSS3引入了线性渐变和径向渐变,允许开发者创建平滑的颜色过渡效果。

线性渐变

线性渐变是沿着一条直线的颜色渐变。

/* 从上到下的线性渐变 */
.element {background: linear-gradient(to bottom, red, yellow);
}
径向渐变

径向渐变是从中心点向外扩展的颜色渐变。

/* 从中心点向外的径向渐变 */
.element {background: radial-gradient(circle, red, yellow);
}

3.2 CSS3中的背景

CSS3扩展了背景属性,增加了多背景、背景尺寸、背景裁剪等新特性。

3.2.1 多背景

CSS3允许为一个元素指定多个背景图像,每个背景图像可以独立设置。

/* 设置多背景 */
.element {background-image: url('image1.png'), url('image2.png');background-position: left top, right bottom;background-repeat: no-repeat, repeat;
}

3.2.2 背景尺寸

background-size 属性允许开发者设置背景图像的尺寸。

/* 背景图像填充整个元素 */
.element {background-size: cover;
}/* 背景图像包含在元素内 */
.element {background-size: contain;
}

3.2.3 背景裁剪

background-clip 属性用于设置背景图像的裁剪区域。

/* 背景图像延伸到边框外 */
.element {background-clip: border-box;
}/* 背景图像延伸到内边距 */
.element {background-clip: padding-box;
}/* 背景图像延伸到内容区域 */
.element {background-clip: content-box;
}

3.2.4 背景附着

background-attachment 属性定义背景图像是随元素滚动还是固定在视口。

/* 背景图像固定 */
.element {background-attachment: fixed;
}/* 背景图像随元素滚动 */
.element {background-attachment: scroll;
}

3.3 实例解析

3.3.1 制作半透明按钮

使用RGBA颜色和透明度制作一个半透明按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>半透明按钮</title>
<style>
.button {background-color: rgba(0, 123, 255, 0.5); /* 50%透明的蓝色 */color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s ease;
}.button:hover {background-color: rgba(0, 123, 255, 0.8); /* 增加透明度 */
}
</style>
</head>
<body>
<button class="button">点击我</button>
</body>
</html>

3.3.2 创建渐变背景的标题

使用线性渐变创建一个渐变背景的标题。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>渐变背景标题</title>
<style>
h1 {background: linear-gradient(to right, red, yellow);color: transparent;-webkit-background-clip: text;background-clip: text;font-size: 48px;
}
</style>
</head>
<body>
<h1>渐变背景标题</h1>
</body>
</html>

3.3.3 多背景图像示例

为一个元素应用多个背景图像。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多背景图像示例</title>
<style>
.container {width: 300px;height: 300px;background-image: url('image1.png'), url('image2.png');background-position: center, top right;background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>

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

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

相关文章

queue学习

std::queue 类是一种容器适配器&#xff0c;它提供队列的功能——尤其是 FIFO&#xff08;先进先出&#xff09;数据结构。此类模板用处为底层容器的包装器——只提供特定的函数集合。queue 在底层容器尾端推入元素&#xff0c;从首端弹出元素。 元素访问 front 访问第一个元素…

20240526每日后端---------分享一些开发必备网站

代码开发工具: https://www.matools.com/ 前端开发网站&#xff1a; https://ui.bqrdh.com/#google_vignette 后端开发网站&#xff1a; https://javaguide.cn/ 设计模式分析&#xff1a; https://refactoringguru.cn/design-patterns/catalog

Elastic Cloud 将 Elasticsearch 向量数据库优化配置文件添加到 Microsoft Azure

作者&#xff1a;来自 Elastic Serena Chou, Jeff Vestal, Yuvraj Gupta 今天&#xff0c;我们很高兴地宣布&#xff0c;我们的 Elastic Cloud Vector Search 优化硬件配置文件现已可供 Elastic Cloud on Microsoft Azure 用户使用。 此硬件配置文件针对使用 Elasticsearch 作…

web如何做接口层面自动化测试?

接口层面约等于集成化测试&#xff0c;且需要启动web容器 一般web项目的&#xff0c;代码都是按照分层开发的&#xff0c;业务主要是集中在service和dao层&#xff0c;而我们如果仅仅是利用之前的单元测试,然后把依赖的代码直接mock掉&#xff0c;仅仅测试controller这一块是没…

国内github镜像站点

以下几个国内的GitHub镜像站点来提高访问速度&#xff1a; 1. kgithub.com&#xff1a;您可以将GitHub源网址前面加k来使用&#xff0c;例如将https://github.com/username/repo.git改为https://kgithub.com/username/repo.git。这个镜像站点允许查看代码、Issue和评论&#x…

ICP算法的具体计算流程

ICP算法的具体计算流程 初始对齐&#xff1a; 输入&#xff1a;两组点云&#xff0c;源点云和目标点云。初始化&#xff1a;选择一个初始的对齐变换&#xff0c;通常是单位矩阵&#xff08;表示没有初始变换&#xff09;。 迭代过程&#xff1a; 步骤1&#xff1a;最近点查找&a…

数据库SQL语言实战(十)(最后一篇)

目录 前言 练习题 实验八 实验九 题目一 题目二 总结 前言 本篇练习题的重点有两个&#xff1a; 一、测试提交commit和回滚rollback的作用,了解锁等待、授权等知识。 二、学会复制表结构、学会插入数据&#xff0c;特别是学会如何避免重复插入&#xff0c;也就是如何避…

ASP.NET MVC 快速入门(图文版)

今年是2024年了&#xff0c;没有多少人在ASP.NET 去做开发&#xff0c;都使用ABP框架 &#xff0c;不过我们仍然需要了解ASP.NET MVC 的一个开发流程 MVC概述 MVC是当前比较流行的WEB程序开发模式之一&#xff0c;ASP.NET MVC是.Net对MVC的一种实现。MVC&#xff08;Model View…

vue全局修改设置滚动条样式

vue全局修改设置滚动条样式 具体代码&#xff1a; ::-webkit-scrollbar{ /*滚动条整体样式*/width: 6px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px; } ::-webkit-scrollbar-thumb{ /*滚动条里面小方块*/border-radius: 5px;background: #cfcbcb; } ::-webkit-scrollbar-…

websocket的使用及建立连接

1. websocket 1.客户端与服务端建连接2.客户端向服务端发送消息3.服务端在接受消息后以“response-接受的消息内容“的形式返回给客户端4.当服务端收到第5条信息的时候&#xff0c;主动关闭与客户端的连接 客户端代码 ​private void clientWebSocket(String url) {OkHttpClie…

声压级越大,STIPA 越好,公共广播就越清晰吗?

在公共广播中&#xff0c;有些朋友经常问到是不是声压越大&#xff0c;广播清晰度就越高&#xff0c;下面我从搜集了一些专业技术资料&#xff0c;供大家参考。 一、声压级越大&#xff0c;STIPA 越好吗&#xff1f; 不完全是。最初&#xff0c;人们认为当声压级达到 60 dBA 以…

氢燃料电池汽车行业发展

文章目录 前言 市场分布 整车销售 发动机配套 氢气供应 发展动能 参考文献 前言 见《氢燃料电池技术综述》 见《燃料电池工作原理详解》 见《燃料电池发电系统详解》 见《燃料电池电动汽车详解》 市场分布 纵观全球的燃料电池汽车市场&#xff0c;截至2022年底&#xff…

2024最新 Jenkins + Docker实战教程(一) - Jenkins介绍及安装

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Android BACK键和HOME键应用差异详解

文章目录 1、应用层分析1.1 BACK键功能实现 1.2 HOME键功能实现 1.3 BACK键与HOME键的区别 2、系统层分析2.1 BACK键的处理2.2 HOME键的处理2.3 代码分析BACK键HOME键BACK键的系统代码分析HOME键的系统代码分析BACK键HOME键 3、优缺点分析3.1 BACK键3.2 HOME键 4、项目中的使用…

【ERNIE + PaddleOCR】 创建自己的论文字典,更好的写论文吧!

一、项目背景 在撰写论文的过程中&#xff0c;许多作者习惯先以中文完成初稿&#xff0c;随后再将其翻译为英文。然而&#xff0c;这种翻译过程往往伴随着一系列挑战。尤其是在词汇选择和语法结构上&#xff0c;很容易使用到一些在学术论文中不常用或不符合规范的表达。为了克服…

【学习笔记】Windows GDI绘图(七)图形路径GraphicsPath详解(下)

文章目录 前三篇回顾GraphicsPath方法Flatten压平(将曲线转成线段)GetBounds获取外接矩形GetLastPoint获取路径最后一个点IsOutlineVisibleIsVisiable是否在轮廓上或内部Reset重置Reverse逆转点的顺序Transform矩阵变换Wrap扭曲变换Widen将路径替换为指定画笔的填充区域 前三篇…

安卓手机APP开发__USB主机和配件概述

安卓手机APP开发__USB主机和配件概述 目录 概述 USB 配件模式 调试注意事项 选择合适的 USB 配件 API 支持 USB 主机模式 API 概览 清单和资源文件示例 概述 Android 通过 USB 配件和 USB 主机两种模式支持各种 USB 外围设备和 Android USB 配件&#xff08;实现 Andr…

springboot学习记录--Maven setting配置

一、配置本地仓库 1 <!--自定义本地仓库路径--> Mirro&#xff1a;Maven 将从镜像仓库获取资源&#xff0c;不同的地理位置或具有更快的网络访问速度。 阿里云镜像&#xff1a; <mirror> <id>aliyunmaven</id> <mirrorOf>*</mirrorO…

TypeScript中的模块和命名空间:代码组织与封装

TypeScript中的模块和命名空间&#xff1a;代码组织与封装 引言 在TypeScript中&#xff0c;模块和命名空间是两种用于代码组织和封装的工具。模块用于将代码划分为独立的单元&#xff0c;而命名空间提供了一种将相关类型和值分组的方式。 基础知识 模块&#xff1a;通过文…

fastapi的简单实战,且用uvicorn将日志同时输出到控制台和日志文件中

简单描述 fastapi的简单实战&#xff0c;且用uvicorn将日志同时输出到控制台和日志文件中 main.py import signal import sys from contextlib import asynccontextmanagerfrom fastapi import FastAPI import uvicorn from fastapi.staticfiles import StaticFilesfrom set…