背景

最新推荐文章于 2022-04-13 16:28:56 发布

心奔

最新推荐文章于 2022-04-13 16:28:56 发布

阅读量255

点赞数 1

分类专栏： CSS 文章标签： CSS样式背景背景颜色背景图片

本文链接：https://blog.csdn.net/g960526/article/details/89203468

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS样式中的背景

背景我们一般是分为两种来说,一种是背景颜色,另一种就是背景图片
那么什么是背景呢?
背景就像是我们平时说的壁纸一样,并不会影响我们房间的任何布局,只是起到装饰作用

源代码如下:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
		<meta name="descrption" content="">
		<meta name="keywords" content="">
		<style type="text/css">
			body{
				height:3000px;  /* 出现滚动条 */
			}
			.box{
				width:600px;
				height:800px;
				border:1px solid red;
				background-color:pink;
				background-color:rgba(180,180,180,0.5);
				/*  
					背景颜色
						颜色值
							关键字：green red  border:1px solid red;
							16进制 #666666 #ff00ff
							rgba(10,10,52,0.5)  取值 0~255	background-color:rgba(180,180,180,0.5);
								red green blue alpah(透明度0~1)
								
					背景图片:background-image:url();  引用背景图片
						值url("图片路径") 所有路径都可以

						 

				*/
				background-image:url("https://t1.hddhhn.com/uploads/tu/201903/493/6455.jpg"); /* 默认图片是平铺的 */

				/* 设置背景的平铺方式：background-repeat:no-repeat;
					no-peteat; 不平铺
					repeat-x; 左右平铺（x轴）
					repeat-y; 上下平铺（y轴）
					repeat；  上下左右平铺(默认)
				*/
				background-repeat:no-repeat;  /* 不平铺 */

				/* 背景定位background-position（位置）:;
						背景的参照物是使用背景的盒子(默认在左上角)

						第一个值x轴方向
						第二个值y轴方向

						关键字的值：只写一个值时，另一个值默认为center
							x轴：left center  right
							y轴：top  centter  bottom
				*/
				background-position:100px 100px;
				background-position: center;

				/* 设置背景图片大小 background-size:300px(宽度) 500px（高度）;
					宽度  高度
						固定像素值
						百分比：参照使用背景的盒子 一般会变形
						auto自适应等比例缩放
						关键字的值：会等比的缩放图片
							cover（封面） ：等比缩放到将盒子刚好铺满（背景图片可能显示不完整）
							contain（包含）:等比缩放到刚好能把图片显示完整（盒子有可能铺不满）
					只写一个值时代表宽度，高度默认为auto
				*/
				background-size:300px 500px;
				/* background-size:100% auto; */
				/* background-size:contain; */
				
				/* 设置背景图片的依附方式 background-attachment:fixed;
					fixed:让背景图片参照变为浏览器窗口(body) 图片的大小和位置的百分比都是以body为准
					
				*/
				/* background-attachment:fixed; */

				/* 
				复合样式书写：
					background:color image repeat position/size attacdment;
				背景的复合样式可以缺省，但是没有写值得缺失样式会被设置为默认值
				必须先写位置才能写大小
				*/

			}
		</style>

	</head>
	<body>
		<!-- 
			背景最大的特性在于对其他元素没有任何影响，只是单纯的装饰
				
		-->
		<!-- <img src="" alt="">
		<div>
			<p></p>
		</div> -->
		<div class="box"></div>
	</body>
</html>

效果图如下:
在这里插入图片描述
图片地址是地址随便使用的,可以是相对路径,可以是绝对路径,也可以是域名地址

心奔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景

CSS样式中的背景背景我们一般是分为两种来说,一种是背景颜色,另一种就是背景图片那么什么是背景呢?背景就像是我们平时说的壁纸一样,并不会影响我们房间的任何布局,只是起到装饰作用源代码如下:<!doctype html><html> <head> <meta charset="utf-8"> <title>背景<...
复制链接

扫一扫

专栏目录