CSS学习记录03

CSS背景

CSS 背景属性用于定义元素的背景效果。

CSS background-color

background-color属性指定元素的背景色。

页面的背景色设置如下:

body {background-color: lightblue;
}

通过CSS,颜色通常由以下方式指定:

  • 有效的颜色名称-比如“red"
  • 十六进制值-比如”#ff0000"
  • RGB值-比如“rgb(255,0,0)"

其他元素

您可以为任何HTML元素设置背景颜色:

举例:<h1>、<p> 和 <div> 元素将拥有不同的背景色:

h1 {background-color: green;
}div {background-color: lightblue;
}p {background-color: yellow;
}

不透明度/透明度

opacity属性指定元素的不透明度/透明度。 取值范围0.0 -1.0。 值越低,越透明:

div {background-color: green;opacity: 0.3;
}

 注意:使用opactiy属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用RGBA的透明度

如果您不希望对子元素应用不透明度,请使用RGBA颜色值。下面的例子背景色而不是文本的不透明度:

div {background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

CSS背景图像

background-image 属性指定用作元素背景的图像。默认情况下,图像会重复,以覆盖整个元素。

例如:

页面的背景图像可以像这里设置:

body {background-image: url("paper.gif");
}

注意:使用背景图象时,请使用不会干扰文本的图像。还可以为特定元素设置背景元素,例如<p>元素:

p {background-image: url("paper.gif");
}

CSS背景重复

CSS background-repeat

默认情况下,background-image 属性在水平和垂直方向上都重复图像。某些图像只适合水平或垂直方向上重复。

body {background-image: url("gradient_bg.png");
}

如果上面的图像仅在水平方向上重复(background-repeat: repeat-x;),则背景看起来会更好:

body {background-image: url("gradient_bg.png");background-repeat: repeat-x;
}

提示:如需垂直重复图像,请设置 background-repeat: repeat-y。

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像:

背景图像仅显示一次:

body {background-image: url("tree.png");background-repeat: no-repeat;
}

CSS background-position 

background-position 属性用于指定背景图像的位置

举例:

把背景图片放在右上角:

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;
}

CSS 背景附着

CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动):

指定应该固定背景图像:

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: fixed;
}

指定背景图像应随页面的其余部分一起滚动:

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: scroll;
}

CSS背景简写

如需缩短代码,也可以在一个属性中指定所有背景属性,它被称为简写属性。

body {background-color: #ffffff;background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;
}

使用简写属性在一条声明中设置背景属性:

body {background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写属性时,属性值的顺序为:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

属性值之一缺失并不要紧,只要按照此顺序设置其他值即可。

所有 CSS 背景属性

属性描述
background在一条声明中设置所有背景属性的简写属性。
background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip规定背景的绘制区域。
background-color设置元素的背景色。
background-image设置元素的背景图像。
background-origin规定在何处放置背景图像。
background-position设置背景图像的开始位置。
background-repeat设置背景图像是否及如何重复。
background-size规定背景图像的尺寸。

补充知识

background-clip

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

 h1 {background: url(./assets/img/161105-17318310655d07.jpg);background-clip: text;color:transparent;font-size: 200px;background-origin: left;}

如果没有设置(background-image)或背景颜色(background-color),那么这个属性只有在边框( border )被设置为非固实(soild)、透明或半透明时才能看到视觉效果,否则,本属性产生的样式变化会被边框覆盖。

background-origin

background-origin规定了背景图片background-image属性的原点位置的背景相对区域。注意:当使用background-attachment为 fixed 时,该属性将被忽略不起作用。

/* 关键字值 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

background-size

background-size设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

/* 关键字 */
background-size: cover
background-size: contain

注意:没有被背景图片覆盖的背景区域仍然会显用background-color属性设置的背景颜色。此外,如果背景图片设置了透明或者半透明属性,衬在背景图片后面的背景色也会显示出来。

cover:

缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。

contain:

缩放背景图片以完全装入背景区,可能背景区部分空白。

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

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

相关文章

Matlab mex- setup报错—错误使用 mex,未检测到支持的编译器...

错误日志&#xff1a; 在使用mex编译时报错提示&#xff1a;错误使用 mex&#xff0c;未检测到支持的编译器。您可以安装免费提供的 MinGW-w64 C/C 编译器&#xff1b;请参阅安装 MinGW-w64 编译器。有关更多选项&#xff0c;请访问https://www.mathworks.com/support/compile…

23种设计模式之外观模式

目录 1. 简介2. 代码2.1 SelectFoodService (选择食品)2.2 PayService (支付服务)2.3 TakeService (制作服务)2.4 OrderService (下单服务)2.5 Food (食品)2.6 TackingSystem &#xff08;外观类&#xff09;2.7 Test &#xff08;测试类&#xff09; 3. 优缺点3. 总结 1. 简介…

vue3 路由跳转携带参数以及其他页面接收参数

vue3 路由跳转携带参数以及其他页面接收参数 传参页面 <script setup> import { useRouter } from "vue-router"; const router useRouter();// 路由 const goToDetail () > {router.push({ path: /about, query: { id: 123 } }); }; function goToDeta…

MeterSphere VS 其他开源接口测试工具

对比项 swagger yapi postman httprunner2.x/3.x jmeter metersphere UI界面 支持支持支持 不支持&#xff08;无界面/UI不够便捷 脚本编写量大 文档不够清晰&#xff09; 支持支持 单接口 支持支持支持支持支持支持 业务场景自动化 不支持支持支持支持支持支持 操作数据…

STM32CUBEIDE FreeRTOS操作教程(十):interrupt on/off中断开关

STM32CUBEIDE FreeRTOS操作教程&#xff08;十&#xff09;&#xff1a;interrupt on/off中断开关 STM32CUBE开发环境集成了STM32 HAL库进行FreeRTOS配置和开发的组件&#xff0c;不需要用户自己进行FreeRTOS的移植。这里介绍最简化的用户操作类应用教程。以STM32F401RCT6开发…

【系统架构设计师论文】微服务架构设计与实践

一、微服务架构概述 1.1 什么是微服务架构? 微服务架构(Microservices Architecture)是一种将应用程序拆分为多个小型服务的架构模式,每个服务都可以独立开发、部署、扩展,并通过轻量级的通信协议(通常是 HTTP/REST 或 gRPC)进行交互。这种架构的核心思想是将大型单体…

长安汽车嵌入式面试题及参考答案

数据结构中的堆栈和编程中的堆栈有什么区别? 在数据结构中,堆栈是一种抽象的数据类型。它遵循后进先出(LIFO)的原则。从操作角度来看,有入栈(push)和出栈(pop)操作。例如,想象有一个装有盘子的栈,只能从栈顶放入和取出盘子。数据结构中的堆栈主要关注其逻辑结构和操…

Python学习38天

class Person:def __init__(self, name, age, job):self.name nameself.age ageself.job job# 重写函数返回属性def __str__(self):return f"{self.name}--{self.age}--{self.job}"# 冒泡排序法 def bubble_sort(my_list: list[Person]):"""冒泡排…

Python 调用 Umi-OCR API 批量识别图片/PDF文档数据

目录 一、需求分析 二、方案设计&#xff08;概要/详细&#xff09; 三、技术选型 四、OCR 测试 Demo 五、批量文件识别完整代码实现 六、总结 一、需求分析 市场部同事进行采购或给客户报价时&#xff0c;往往基于过往采购合同数据&#xff0c;给出现在采购或报价的金额…

docker x86环境构建arm镜像出现failed to fetch oauth token问题

问题&#xff1a;最近在使用x86的MAC机器准备打包arm的镜像时使用命令如下 docker buildx build --platform linux/arm64 --load --no-cache -t deepface:v1-arm .出现连接问题 [] Building 31.7s (3/3) FINISHED …

C语言中map的用法和其他数据结构的区别

在C语言中&#xff0c;没有直接内置的map数据结构&#xff08;类似于C的std::map&#xff09;&#xff0c;但可以通过结构体、数组、链表或哈希表来实现类似功能。下面将从map的概念、实现方法和与其他数据结构的区别等方面进行详细讲解。 一、Map的概念 Map是一种键值对&…

【AI系统】AI 编译器基本架构

AI 编译器基本架构 在上一篇文章中将 AI 编译器的发展大致分为了 3 个阶段&#xff0c;分别为 1&#xff09;朴素编译器、2&#xff09;专用编译器以及 3&#xff09;通用编译器。 本文作为上一篇文章 AI 编译器架构的一个延续&#xff0c;着重讨论 AI 编译器的通用架构。首先…

java版工程项目管理系统源码:Spring Cloud与前后端分离的完美结合

在现代化的工程项目管理中&#xff0c;一套功能全面、操作便捷的系统至关重要。本文将介绍一个基于Spring Cloud和Spring Boot技术的Java版工程项目管理系统&#xff0c;结合Vue和ElementUI实现前后端分离。该系统涵盖了项目管理、合同管理、预警管理、竣工管理、质量管理等多个…

近几年,GIS专业的五类就业方向!

近二十几年来&#xff0c;地理信息科学毕业生的就业方向在不断发生变化。 早期的地理信息科学技术主要应用于政府部门&#xff0c;因此学生就业主要在高校、交通运输、规划勘测设计、国土、矿业、水利电力、通讯、农林、城市建设、旅游等国家政府部门或事业单位。 随着地理信…

css选择当前元素前面的一个元素

选择text-danger前面的ant-divider: .ant-divider:has( .text-danger) {display: none; }

动态代理如何加强安全性

在当今这个信息爆炸、网络无孔不入的时代&#xff0c;我们的每一次点击、每一次浏览都可能留下痕迹&#xff0c;成为潜在的安全隐患。如何在享受网络便利的同时&#xff0c;有效保护自己的隐私和信息安全&#xff0c;成为了每位网络使用者必须面对的重要课题。动态代理服务器&a…

el-table 纵向 横向 多级表头

<el-table :data"tableData" class"diaTable":span-method"handleSpanMethod"border:header-cell-style"{background:#292929,color:#fff}"><!-- 纵向表头 --><el-table-column label"纵向表头" width"…

网页端五子棋对战(二)---数据库连接用户登录注册接口设计postman验证

文章目录 1.用户模块--数据库的设计1.1idea新建db.sql文件1.2mysql建库建表 2.使用mybatis操作数据库2.1修改spring配置文件2.2创建实体类用户user2.3创建Mapper接口2.4实现xml配置文件 3.前后端交互接口架构4.后端代码实现4.1登录模块4.2注册模块4.3获取用户信息 5.postman验证…

【导航查询】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…

Nginx篇之实现nginx转发兼容HTTP和Websocket两种协议

Nginx实现同时兼容http协议和websocket协议 map $http_upgrade $eop_gateway {default "eop-gateway-http";websocket "eop-gateway-ws"; }# 控制 Connection header map $http_upgrade $connection_upgrade {default "keep-alive"; # HTTP …