backgroud属性

最新推荐文章于 2023-03-27 20:16:26 发布

小脑斧123

最新推荐文章于 2023-03-27 20:16:26 发布

阅读量507

点赞数

分类专栏： Pyhon高级

本文链接：https://blog.csdn.net/weixin_42219287/article/details/107291679

版权

Pyhon高级专栏收录该内容

75 篇文章 0 订阅

订阅专栏

属性解释

backgroud属性是CSS中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，backgroud是一个复合属性，它可以分解成如下几个设置项：

值	描述	CSS
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>backgroud属性</title>
	<style type="text/css">
		.box{
			width: 400px;
			height: 200px;
			border: 5px solid #000;
			margin: 50px auto 0;

			background-color: cyan;
			/*默认平铺满n张照片*/
			background-image: url(images/007.jpg);
			/*
			
			 	repeat-x：横向平铺（X轴）;
			 	repeat-y：横向平铺（Y轴）;
			 	no-repeat:只平铺一次;
			 	repeat:平铺所有;
			
			*/
			background-repeat: no-repeat;
			/*
				方位参数
				水平方向：left center right
				垂直方向：top  center bottom
				
				数值参数：10px 20px;
			 */
			background-position: left bottom;
			background-position: 10px bottom;
			background-position: -20px 100px; /*左隐藏20px的图片(超出box)*/

			/*合并写法:没顺序要求且可写部分参数*/
			background: url(images/007.jpg) -20px bottom no-repeat cyan;


		}

	</style>
</head>
<body>
	<div class="box">
		<img src="images/007.jpg" alt="图片">
		html5图片
	</div>
</body>
</html>

小脑斧123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
backgroud属性

属性解释backgroud属性是CSS中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，backgroud是一个复合属性，它可以分解成如下几个设置项：值描述 CSS background-color 规定要使用的背景颜色。 1 background-position 规定背景图像的位置。 1 background-size 规定背景图片的尺寸。 3 background-repeat 规定如何重复背景.
复制链接

扫一扫