CSS 3之背景属性

最新推荐文章于 2024-05-18 00:30:00 发布

菇毒

最新推荐文章于 2024-05-18 00:30:00 发布

阅读量237

点赞数

分类专栏： web 前端学习 # CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125408609

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

背景属性

1. 背景图片大小
2. 背景显示区域
3. 背景图像裁剪区域

1. 背景图片大小

使用 background-size 属性，能设置背景图片大小；
语法格式如下所示：

background-size:[<length> | <percentage> | auto] {1,2} | cover | contain

20220510
例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设定背景大小</title>
		<style>
			body{
				background-image: url(3.jpg);
				background-repeat: no-repeat;
				background-size:800px 700px;
			}
		</style>
	</head>
	<body>
	</body>
</html>

20220510
background-size 属性能设置一个或多个值，一个为必填，一个为选填；
第一个值指定图片宽度，第二个值指定图片高度；若只设定一个值，则第二个值默认为auto；

2. 背景显示区域

使用 background-origin 属性，能完成背景图片的定位；
默认情况下，background-position 属性总是以元素左上角原点作为背景图片定位，适应 background-origin 属性能改变这种定位方式；
语法格式如下所示：

 background-origin :border | padding | content

20220510
例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景坐标原点</title>
		<style>
			div{
				text-align: center;
				height: 500px;
				width: 416px;
				border: solid 2px blue;
				padding: 32px 2em 0;
				background-image: url(3.jpg);
				background-origin: padding;
			}
			div h1{
				font-size: 23px;
				font-family: "幼圆";
			}
			div p{
				text-indent: 2em;
				line-height: 2em;
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<div>
			<h1>竹源坑</h1>
			<p>	杀虎防咥人，芟蔓莫留根。</p>
			<p> 留根终遗患，伤心不可论。</p>
			<p>竹源数百家，今余几人存。</p>
			<p>竹外有源泉，血流泉水浑。</p>
			<p>群盗故比邻，姻娅如弟昆。</p>	
			<p>反戈相啖食，收骨无儿孙。</p>	
			<p>茕茕数寡妇，零落依空村。</p>	
			<p>凶年嗟半菽，撮土招游魂。</p>	
			<p>人亡亩税在，泪罢还声吞。</p>	
		</div>
	</body>
</html>

20220510

3. 背景图像裁剪区域

使用 background-clip 属性，能裁剪背景图片；
语法格式如下所示：

background-clip :border-box | padding-box | content-box | no-clip

20220510
例子 3:：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景裁剪</title>
		<style>
			div{
				height: 500px;
				width: 390px;
				background-image: url(3.jpg);
				background-repeat: no-repeat;
				background-clip: content;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

20220510

菇毒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 3之背景属性

使用属性，能设置背景图片大小；语法格式如下所示：例子 1：属性能设置一个或多个值，一个为必填，一个为选填；第一个值指定图片宽度，第二个值指定图片高度；若只设定一个值，则第二个值默认为auto；使用属性，能完成背景图片的定位；默认情况下，属性总是以元素左上角原点作为背景图片定位，适应属性能改变这种定位方式；语法格式如下所示：例子 2：使用属性，能裁剪背景图片；语法格式如下所示：例子 3:：...
复制链接

扫一扫

专栏目录