17-(CSS基础)CSS属性_背景

最新推荐文章于 2024-07-25 08:14:42 发布

七色的天空

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量39

点赞数

分类专栏： 03_CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/q506174602/article/details/129964048

版权

03_CSS 专栏收录该内容

83 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景</title>

	<style>
		.bg {
			width: 600px;
			height: 400px;
			/*1.背景颜色 
				- 关键字:red black...
				- 十六进制 #fffff #000000
				- RGBA Red Green Blue Alpha(透明度)  rgba( 8, 123, 13, 1)
			*/
			background-color: rgba(8, 123, 13, 1);

			/*2.背景图片 background-image: url();
				-引入: 背景图片超出容器的尺寸时, 超出部分会隐藏(img会溢出容器)
				-平铺方式 background-repeat
					-- no-repeat 不平铺
					-- repeat-x: 只在水平方向上平铺;
					-- repeat-y: 只在垂直方向上平铺;
				-图片大小 background-size
					--① 宽度px(和img呈现效果类似, 只设置宽度,那么高度会自适应等比例缩放) 
						宽度px  高度px(可能会导致图片变形)
					--② 百分比 百分比(可能会导致图片变形且都是相对于父元素计算的)
						百分比(默认就是宽的百分比, 宽度是相对于父元素计算的; 高度是自适应等比例缩放)
					--③ cover 代表着会自动填满父元素的内容部分
				-定位 backgroun-position: a b;
					参数a: 水平移动的位置;
					参数b: 垂直移动的位置;
					参数值:
						-- 单位px, 只有一个参数的时候, 默认是水平移动的位置, 垂直方向上会自动居中。
						-- ① x% y%
							x%是水平移动的位置(容器的宽度-背景图片的宽度) * x% 
							y%是垂直移动的位置(容器的高度-背景图片的高度) * y% 
							② *%,
							  *%是水平移动的位置(容器的宽度-背景图片的宽度) * *% 
							  垂直方向上会自动居中
						  	③ left center right
						  	  top center bottom
						  	  如果只设置了一个关键字, 则其他方向的值是center
		  	    -是否固定 background-attachment
		  	    	-fixed
		  	    	-scroll
	  	    	-综合属性
	  	    		background: url(../../01_HTML/images/古诗词.webp) no-repeat 100px 100px fixed;
	  	    		background-color: red;
	  	    		background-image: url();
	  	    		background-repeat: no-repeat;
	  	    		background-position:100px 100px;
	  	    		background-attachment: fixed;

	  	    		background-size?
			*/
			background-image: url(../../01_HTML/images/古诗词.webp);
			background-repeat: no-repeat;
			background-size: 300px;
			background-position: right;
			background-attachment: scroll;
		}
	</style>
</head>
<body>
	<div class="bg">
		<!-- <img src="../../01_HTML/images/古诗词.webp" alt=""> -->
	</div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

上述运行结果: