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

背景样式

在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请求，势必影响页面加载速度

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Spring MVC 参数传递和JSON数据处理

Spring MVC 参数传递和JSON数据处理

参数传递 ModelAndView传递 编写controller Controller RequestMapping("/account") public class AccountController { ​//也可以不创建ModelAndView&#xff0c;直接在参数中指定RequestMapping(value "/findAccount9")public ModelAndView findAccou…
阅读更多...
ArrayBlockingQueue原理探究

ArrayBlockingQueue原理探究

类图结构 同样&#xff0c;为了能从全局一览ArrayBlockingQueue的内部构造&#xff0c;先来看它的类图。 ArrayBlockingQueue的内部有一个数组items,用来存放队列元素&#xff0c;putindex变量表示入队元素下标&#xff0c;takelndex是出队下标&#xff0c;count统计队列元素个…
阅读更多...
从零开发短视频电商 Tesseract OCR 的 Java 拓展库 javacpp-presets

从零开发短视频电商 Tesseract OCR 的 Java 拓展库 javacpp-presets

文章目录 简介添加依赖识别示例示例一 识别本地图片示例二 识别图像中的各个组件&#xff08;比如文本行&#xff0c;单词&#xff0c;或单个字符&#xff09;示例三 使用迭代器遍历识别结果及其选择项示例四 方向和脚本检测示例五 结果迭代器示例六 设置引擎、页面分割模式、语…
阅读更多...
Java面试之并发篇（二）

Java面试之并发篇（二）

1、前言 本篇主要基于Java面试题之并发篇&#xff08;一&#xff09;继续梳理java中关于并发相关的高频面试题。本篇的面试题基于网络整理&#xff0c;和自己编辑。在不断的完善补充哦。 2、synchronized 的原理是什么? synchronized是 Java 内置的关键字&#xff0c;它提供…
阅读更多...
Python类型转换，数据类型转换函数大全 与 strip()函数介绍

Python类型转换，数据类型转换函数大全 与 strip()函数介绍

Python类型转换&#xff0c;数据类型转换函数大全 虽然 Python 是弱类型编程语言&#xff0c;不需要像 Java 或 C 语言那样还要在使用变量前声明变量的类型&#xff0c;但在一些特定场景中&#xff0c;仍然需要用到类型转换。 比如说&#xff0c;我们想通过使用 print() 函数…
阅读更多...
你猜不到的2024年！特斯拉首席预言家马斯克，发表预言惹社交平台沸腾，2024年真的...

你猜不到的2024年！特斯拉首席预言家马斯克，发表预言惹社交平台沸腾，2024年真的...

埃隆马斯克&#xff0c;特斯拉首席执行官&#xff0c;一向以其独特的见解和预测而备受瞩目。最新消息显示&#xff0c;他对2024年的预测让人瞠目结舌&#xff0c;称2024将比过去四年更加“疯狂”。 就在2024年刚刚来临的时候&#xff0c;有人在社交平台上发问&#xff0c;希望…
阅读更多...
uni微信小程序强制用户更新版本

uni微信小程序强制用户更新版本

强制更新的代码参考官方文档 uni.getUpdateManager() | uni-app官网 我这边的如下&#xff1a; //检查版本更新const updateManager uni.getUpdateManager();updateManager.onCheckForUpdate(function (res) {// 请求完新版本信息的回调console.log(res.hasUpdate, "是…
阅读更多...
您的计算机已被.LIVE勒索病毒感染？恢复您的数据的方法在这里！

您的计算机已被.LIVE勒索病毒感染？恢复您的数据的方法在这里！

引言&#xff1a; 在数字时代&#xff0c;.LIVE勒索病毒如暗夜中的黑暗调&#xff0c;威胁着个人和企业的数字安全。本文将深入介绍.LIVE勒索病毒的特征&#xff0c;提供解密数据的方法&#xff0c;并讨论预防措施&#xff0c;让我们共同筑起数字世界的防护之墙。数据的重要性…
阅读更多...
使用FFmpeg+EasyDarwin搭建音视频推拉流测试环境

使用FFmpeg+EasyDarwin搭建音视频推拉流测试环境

1. 前言 在上一篇文章《使用VS2017在win10 x64上编译调试FFmpeg&#xff08;附源码和虚拟机下载&#xff09;》中&#xff0c;我们讲解了如何搭建FFmpeg源码编译和调试环境。 调试FFmpeg&#xff0c;还需要搭建流媒体服务器。流媒体服务器的作用是通过网络对外提供音视频服务…
阅读更多...
01-你好Python-python环境安装 python解释器的安装 pycharm的安装

01-你好Python-python环境安装 python解释器的安装 pycharm的安装

python环境安装 官方网址&#xff1a;https://python.org 这里可以下载最新版本的&#xff0c;下载完成以后在自己的浏览器文件下载的文件夹中找到该文件 下载速度可能会比较慢&#xff0c;这里已经提供好了文件&#xff0c;可以直接点击安装 点击Customize installation 点击…
阅读更多...
【QML COOK】- 006-用C++定义一个QML元素类型

【QML COOK】- 006-用C++定义一个QML元素类型

Qt原本是一个C图形框架&#xff0c;因此QML也少不了C。QML通常只负责显示&#xff0c;而后台逻辑由C实现&#xff0c;因此掌握C和QML之间的交互非常必要。 本例实现一个最简单的例子&#xff0c;用C定义一个QML的元素类型并在QML使用它。 需求是在窗口上显示鼠标点击的次数。…
阅读更多...
postman做接口测试

postman做接口测试

之前搞自动化接口测试&#xff0c;由于接口的特性&#xff0c;要验证接口返回xml中的数据&#xff0c;所以没找到合适的轮子&#xff0c;就自己用requests造了个轮子&#xff0c;用着也还行&#xff0c;不过就是case管理有些麻烦&#xff0c;近几天又回头看了看postman也可以玩…
阅读更多...
找出字符串中第一个匹配项的下标(Leetcode28)

找出字符串中第一个匹配项的下标(Leetcode28)

例题&#xff1a; 分析&#xff1a; 题目的意思就是&#xff1a; 先给出一个字符串pattern&#xff0c;要拿着pattern字符串和原始字符串&#xff08;origin&#xff09;比对&#xff0c;若在origin中找到了pattern字符串&#xff0c;则返回pattern字符串在原始字符串origin中的…
阅读更多...
基于ssm的无纸化学习平台的设计与实现论文

基于ssm的无纸化学习平台的设计与实现论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…
阅读更多...
使用 STM32 和 DS18B20 温度传感器设计室内温度监测与报警系统

使用 STM32 和 DS18B20 温度传感器设计室内温度监测与报警系统

为设计室内温度监测与报警系统&#xff0c;我们将利用STM32微控制器和DS18B20数字温度传感器&#xff0c;以及蜂鸣器实现温度报警功能。在本文中&#xff0c;将介绍如何通过STM32微控制器读取DS18B20传感器的温度数据&#xff0c;并在超出设定范围时触发蜂鸣器报警。 1. 系统概…
阅读更多...
m1 + swoole(hyperf) + yasd + phpstorm 安装和debug

m1 + swoole(hyperf) + yasd + phpstorm 安装和debug

参考文档 Mac M1安装报错 checking for boost... configure: error: lib boost not found. Try: install boost library Issue #89 swoole/yasd GitHub 1.安装boost库 brew install boostbrew link boost 2.下载yasd git clone https://github.com/swoole/yasd.git 3.编…
阅读更多...
自学Python，需要注意哪些？

自学Python，需要注意哪些？

为什么要学习Python&#xff1f; 在学习Python之前&#xff0c;你不要担心自己没基础或“脑子笨”&#xff0c;我始终认为&#xff0c;只要你想学并为之努力&#xff0c;就能学好&#xff0c;就能用Python去做很多事情。在这个喧嚣的时代&#xff0c;很多技术或概念会不断兴起…
阅读更多...
bootstrap搭建一个简单的官网案例附代码

bootstrap搭建一个简单的官网案例附代码

bootstrap搭建一个简单的官网案例附代码 效果常用属性完整代码 效果 大概的效果如下 主要都是用bootstrap的代码实现的 网站是照着 b站视频做的 查看视频教程 建议自己先看一遍文档再跟着视频写&#xff0c;不然可能看不懂 bootstarp中文文档 logo是从别人的站上扒的有点不太协…
阅读更多...
力扣刷题-二叉树-合并二叉树

力扣刷题-二叉树-合并二叉树

617.合并二叉树&#xff08;经典&#xff09; 合并二叉树是操作两棵树的题目里面很经典的&#xff0c;如何对两棵树遍历以及处理&#xff1f; 给定两个二叉树&#xff0c;想象当你将它们中的一个覆盖到另一个上时&#xff0c;两个二叉树的一些节点便会重叠。 你需要将他们合并…
阅读更多...
python爬取诗词名句网-三国演义，涉及知识点：xpath，requests，自动识别编码，range

python爬取诗词名句网-三国演义，涉及知识点：xpath，requests，自动识别编码，range

页面源代码： <!DOCTYPE html> <html lang="zh"> <head><script src="https://img.shicimingju.com/newpage/js/all.js"></script><meta charset="UTF-8"><title>《三国演义》全集在线阅读_史书典籍_…
阅读更多...
最新文章

Copyright @ 2022~2023