CSS3背景样式详解（图像大小，图像位置等）

news2024/11/17 0:41:24

背景样式

在CSS3中，新增了3个背景属性

属性说明
background-size背景大小
background-origin背景位置
background-clip背景剪切

background-size属性

概念：在CSS3之前，我们是不能用CSS来控制背景图片大小的，背景图片的大小都是由图片实际大小确定的。

但在CSS3中，可以用background-size属性来定义背景图片的大小。

特点

  • 图片可以保有其原有的尺寸，
  • 图片拉伸到新的尺寸，
  • 图片在保持其原有比例的同时缩放到元素的可用空间的尺寸

语法:：

background-size:属性值；

常用属性值

属性值说明
像素值设置背景图像的宽度和高度。只能为正值。如果设置2个属性值，则第1个属性值定义宽度，第2个属性值定义高度。如果只设置1个属性值，则表示宽度，而高度则等比例缩放
百分比以父元素的百分比来设置背景图像的宽度和高度。只能为正值。如果设置2个属性值，第一个属性值设置宽度，第二个属性值定义高度。如果只设置1个属性值，该属性值表示宽度，而高度则等比例缩放
auto定义背景图像按照原始尺寸表示
cover即“覆盖”，表示把背景图像等比例缩放到完全覆盖背景区域。背景图像的某些部分也许无法在背景定位区域中。和contain相反，cover值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景以它的全部宽或者高覆盖所在容器。当容器和背景图像大小不同时，背景图的左/右或者上/下部分会被裁剪
contain即”容纳“，表示把背景图像等比例缩放到宽度或高度与容器的宽度或高度相等时，以使背景图像位于区域内，但可能使背景区部分空白。contain尽可能的缩放背景并保持图像的宽高比例（图片不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小不同时，容器的空白区域（上/下或者左/右）会显示由background-color设置的背景颜色

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

单张图片的背景大小可以使用以下方法中的一种来规定：

  • 使用关键字contain
  • 使用关键字cover
  • 设定宽度和高度值

当通过宽度和高度来定义尺寸时，可以提供一或者两个数值:

  • 当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值：
  • 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为 auto。
  • 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

每个值都可以是像素值 还是百分比,或者auto

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片的大小</title>
		<style type="text/css">
			div{
				display:inline-block;
				width:200px;
				height:150px;
				border:1px solid green;
				margin:20px;
				background-image:url('../边框样式/image/son.jpg');
				background-repeat:no-repeat;
			}
			.a{
				background-size:200px 150px;
			}
			.b{
				background-size:100% 100%; 
			}
			.c{
				background-size:auto;
			}
			.d{
				background-size:cover;
			}
			.e{
				background-size:contain;
			}
		
		</style>	
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
		<div class="e"></div>
	</body>
</html>

运行结果
在这里插入图片描述

注意：背景图片跟普通图片（即是img标签）是不同的东西。width跟height这两个属性只能用来定义img标签图片的大小，而不能用于控制背景图片的大小

background-origin属性

概念：默认情况下，background-position属性总是以元素左上角为坐标原点定位背景图像。

在CSS3中，可以使用background-origin属性来定义背景图片是从什么地方开始平铺的，也就是定义背景图片background-image属性的原点位置的背景相对区域

语法：

background-origin:属性值;

说明

属性值

属性值说明
border-box从边框区域（含边框）开始显示背景图像
padding-box默认值，从内边距区域（含内边距）开始显示背景图像
content-box从内容区域（含内容）开始显示背景图像

注意：当使用background-attachment为fixed时，该属性将被忽略不起作用

边框区域，内边距区域和内容区显示如图
在这里插入图片描述

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片位置</title>
		<style>
			div{
				display:inline-block;
				width:200px;
				height:150px;
				border:10px solid green;
				margin:20px;
				padding:20px;
				background-image:url('../边框样式/image/border.png');
				background-repeat:no-repeat;
				text-align-last: center;
				line-height:150px;
				font-size:20px;
			
			}
			.a{
				background-origin:border-box;
			}
			.b{
				background-origin:padding-box;
			}
			.c{
				background-origin:content-box;
			}
		</style>
	</head>
	<body>
		<div class="a">border-box</div>
		<div class="b">padding-box</div>
		<div class="c">content-box</div>
	</body>
</html>

运行结果
在这里插入图片描述

实际上，background-origin属性的本质是：定义background-position属性相对于什么位置来定位。如果没有设置background-position,因此浏览器会采用默认值，即"background-position:top left"。

background-clip属性

概念：background-clip属性用于定义背景图片的裁剪区域

语法：

background-clip:属性值;

属性值

属性说明
border-box默认值，从边框区域开始向外裁剪背景图像
padding-box从内边距区域开始向外裁剪背景图像
content-box从内容区域开始向外裁剪背景图像
text背景被裁剪成文字的前景色

边框区域，内边距区域和内容区显示如图
在这里插入图片描述

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>裁剪图像</title>
		<style>
			div{
				display:inline-block;
				width:200px;
				height:150px;
				border:10px dotted green;
				margin:20px;
				padding:20px;
				background-image:url('../边框样式/image/son.jpg');
				background-repeat:no-repeat;
				text-align-last: center;
				line-height:150px;
				font-size:20px;
				color:white;
			}
			.a{
				background-clip:border-box;
			}
			.b{ 
				background-clip:padding-box;
			}
			.c{
				background-clip:content-box;
			}
			.d{
				background-clip:text;
				color:rgba(0,255,255,0.6);
			}
		</style>
	</head>
	<body>
		<div class="a">border-box</div>
		<div class="b">padding-box</div>
		<div class="c">content-box</div>
		<div class="d">text</div>
</html>

运行结果
在这里插入图片描述

多重背景图像

概念：

所谓的多重背景图像，指的是该元素的背景图像不止一张

在CSS3之前版本中，一个容器中只能填充一幅背景图像，如果重复设置，后设置的背景图像会覆盖之前的背景图像

但在CSS3的背景图像功能增强了很多，允许在一个容器里显示多幅背景图像，使背景图像效果更容易控制。

CSS3中没有为实现多重背景图像提供对应的属性，而是通过background这个复合属性来实现多重背景图像的效果，各属性值之间用英文逗号（,）隔开。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多重背景图像</title>
		<style>
			div{
				width:1200px;
				height:800px;
				border:1px solid blueviolet;
				background:url("../边框样式/image/fish4.png") left center no-repeat ,url("../边框样式/image/fish.png") top center no-repeat;

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

运行结果
在这里插入图片描述

除了运用background复合属性，也可以通过background属性的子属下background-image、background-repeat、background-position等属性提供多个属性值来实现多重背景图像的效果

/* background复合属性 */
	background:url("../边框样式/image/fish4.png") left center no-repeat ,url("../边框样式/image/fish.png") top center no-repeat;

/* background子属性，这两者效果是一样的*/
	background-image: url("../边框样式/image/fish4.png"),url("../边框样式/image/fish.png");
	background-repeat:no-repeat;
	background-position:left center,top center;
	background-size:40%;

这两者是等价的，运行效果都一致的。

说明：多重背景图像在实际开发中，不建议使用多张背景图片，因为每多一张图片就会多引发一次HTTP请求，势必影响页面加载速度

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【HarmonyOS】消息通知场景的实现

【HarmonyOS】消息通知场景的实现

从今天开始&#xff0c;博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”&#xff0c;对于刚接触这项技术的小伙伴在学习鸿蒙开发之前&#xff0c;有必要先了解一下鸿蒙&#xff0c;从你的角度来讲&#xff0c;你认为什么是鸿蒙呢&#xff1f;它出现的意义又是…
阅读更多...
(N-139)基于springboot,vue宠物领养系统

(N-139)基于springboot,vue宠物领养系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vue3element-plus 服务端技术&#xff1a;springbootmybatis-plusr…
阅读更多...
C练习——杨辉三角

C练习——杨辉三角

题目&#xff1a; 打印近似杨辉三角&#xff0c;行数n自选 百度找的杨辉三角&#xff0c;参考一下&#xff1a; 解析&#xff1a; 把它的全部元素左对齐&#xff0c;就可以看成近似杨辉三角的样子 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 …… 每个数等于它上方两数…
阅读更多...
C++基础1

C++基础1

一、形参带默认值的函数 二、inline内联函数 内联函数是一种在编译器处理时&#xff0c;将函数的实际代码插入到调用处的方法。通常&#xff0c;函数调用涉及一定的开销&#xff0c;包括保存和恢复调用现场、跳转到函数的代码位置等。而内联函数通过在调用处直接插入函数的代码…
阅读更多...
十五.流程控制与游标

十五.流程控制与游标

流程控制与游标 1.流程控制1.1分支结构之IF1.2分支结构值CASE1.3循环结构之LOOP1.4循环结构之WHILE1.5循环结构之REPEAT1.6跳转语句之LEAVE语句1.7跳转语句之ITERATE语句 2.游标2.1什么是游标2.2使用游标步骤4.3举例4.5小结 1.流程控制 解决复杂问题不可能通过一个 SQL 语句完…
阅读更多...
智慧校园大数据平台架构

智慧校园大数据平台架构

平台架构 基础硬件层 基础硬件层是由一组低廉的PC或服务器组合构建而成。基础硬件层主要承载着数据的存储、运算、容错、调度和通信等任务，对基础应用层下达的指令进行执行和反馈。 数据集成 大数据特征表现在实时、交互、海量等方面，并且以半结构化、非结构化数据为主，价…
阅读更多...
SpringBoot中 如何优雅的 重试调用 第三方API？

SpringBoot中 如何优雅的 重试调用 第三方API？

引言 在实际的应用中&#xff0c;我们经常需要调用第三方API来获取数据或执行某些操作。然而&#xff0c;由于网络不稳定、第三方服务异常等原因&#xff0c;API调用可能会失败。为了提高系统的稳定性和可靠性&#xff0c;我们通常会考虑实现重试机制。 本文将深入探讨如何在…
阅读更多...
基于JAVA的固始鹅块销售系统 开源项目

基于JAVA的固始鹅块销售系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固始鹅块模块2.4 鹅块订单模块2.5 评论管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 鹅块类型表3.2.2 鹅块表3.2.3 鹅块订单表3.2.4 鹅块评论表 四、系统展示五、核心代码5.…
阅读更多...
vue前端开发自学,祖孙多层级组件嵌套关系数据传输

vue前端开发自学,祖孙多层级组件嵌套关系数据传输

vue前端开发自学,祖孙多层级组件嵌套关系数据传输&#xff01;官方提供了一个解决方案&#xff0c;就是&#xff0c;在根组件内使用provide,哪个子孙组件想调用这个数据&#xff0c;就可以inject接收就行了。虽然是方便了&#xff0c;但是这个有点要求&#xff0c;就是只能自上…
阅读更多...
重新认识Word——页眉页脚

重新认识Word——页眉页脚

重新认识Word——页眉页脚 节设置页脚第X页&#xff0c;共Y页 奇偶页不同页眉包含章节号清除页眉横线 我们之前已经全面的构建了我们的文章&#xff0c;现在我们来了解一下&#xff0c;我们毕业论文的页眉&#xff08;页面信息&#xff09;页脚&#xff08;页码&#xff09;的设…
阅读更多...
JVM运行时数据区（下篇）

JVM运行时数据区（下篇）

紧接上篇&#xff1a;JVM运行时数据区&#xff08;上篇&#xff09;-CSDN博客 堆 一般Java程序中堆内存是空间最大的一块内存区域。创建出来的对象都存在于堆上。 栈上的局部变量表中&#xff0c;可以存放堆上对象的引用。静态变量也可以存放堆对象的引用&#xff0c;通过静态…
阅读更多...
Java中的Servlet你了解吗？

Java中的Servlet你了解吗？

☆* o(≧▽≦)o *☆嗨~我是小奥&#x1f379; &#x1f4c4;&#x1f4c4;&#x1f4c4;个人博客&#xff1a;小奥的博客 &#x1f4c4;&#x1f4c4;&#x1f4c4;CSDN&#xff1a;个人CSDN &#x1f4d9;&#x1f4d9;&#x1f4d9;Github&#xff1a;传送门 &#x1f4c5;&a…
阅读更多...
《数据结构》实验报告-实验一 线性结构及其应用

《数据结构》实验报告-实验一 线性结构及其应用

《数据结构》实验报告-实验一 线性结构及其应用 一、问题分析 题目要求收集两个班的学生成绩信息并按降序排列&#xff0c;其中每个学生的数据包括班级&#xff0c;学号和成绩信息&#xff0c;需要用一个结构体作为整体存储。并且数据是可以不断添加进来的&#xff0c;可以用…
阅读更多...
c语言实现b树

c语言实现b树

概述&#xff1a;B 树&#xff08;B-tree&#xff09;是一种自平衡的搜索树数据结构&#xff0c;广泛应用于数据库和文件系统等领域。它的设计旨在提供一种高效的插入、删除和查找操作&#xff0c;同时保持树的平衡&#xff0c;确保各个节点的深度相差不大。 B 树的特点包括&a…
阅读更多...
Vue keep-alive的使用和原理解析

Vue keep-alive的使用和原理解析

✨ 专栏介绍 在当今Web开发领域中&#xff0c;构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架&#xff0c;正是为了满足这些需求而诞生。它采用了MVVM架构模式&#xff0c;并通过数据驱动和组件化的方式&#xff0c;使…
阅读更多...
基于ssm的中文学习系统的设计与实现+jsp论文

基于ssm的中文学习系统的设计与实现+jsp论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本中文学习系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…
阅读更多...
Linux工具-搭建文件服务器

Linux工具-搭建文件服务器

当我们使用linux系统作为开发环境时&#xff0c;经常需要在Linux系统之间、Linux和Windows之间传输文件。 对少量文件进行传输时&#xff0c;可以使用scp工具在两台主机之间实现文件传输&#xff1a; rootubuntu:~$ ssh --help unknown option -- - usage: ssh [-46AaCfGgKkMN…
阅读更多...
C语言辨析——这个字符串长度是多少？

C语言辨析——这个字符串长度是多少？

1. 问题 请问字符串"\tac\b\b\x41\nc\104\""的长度是多少&#xff1f; 2. 解答 该字符串的长度为10。这10个字符分别是水平制表符\t&#xff0c;a&#xff0c;c&#xff0c;两个退格符\b&#xff0c;\x41对应的字符’A&#xff0c;换行符\n&#xff0c;c&…
阅读更多...
R语言【paleobioDB】——pbdb_subtaxa()：统计指定类群下的子类群数量

R语言【paleobioDB】——pbdb_subtaxa()：统计指定类群下的子类群数量

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_subtaxa (data, do.plot, col) Arguments…
阅读更多...
NLP论文阅读记录 - 2021 | WOS 基于动态记忆网络的抽取式摘要

NLP论文阅读记录 - 2021 | WOS 基于动态记忆网络的抽取式摘要

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.前提三.本文方法四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结思考 前言 Extractive Summarization Based on Dynamic Memory Network&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023