HTML-CSS(6)css图片基础使用

18
四月
2021

图片存储

图片的颜色主要是由三原色混合而成(三原色:红绿蓝1-250 R(红)G(绿)B(蓝)。一个像素点保存一个颜色信息

图片压缩

现在很多图片其实都是经过压缩而成的,这样才能够用足够小的空间承载较多的图片数量。
图片压缩的原理:将那些可以忽略,不重要的颜色信息可以不保存。将多个颜色块连续一致的,可以使用一个颜色块信息记录即可。这样一来就可以节省很多存储空间了

图片格式

图片格式分为三种分别是gif、jpg、png

gif:支持动画,只有全透明和不透明两种模式,只有256中颜色(适用于图表)

jpg:采用有损压缩算法,体积较小,不支持透明,不支持动画

png:采用无损压缩算法,体积也相对较小。支持背景透明,不支持动画

svg:无论怎么放大图像都不会失帧的,不会保存图片的信息,只会记录图片的形状和颜色(颜色过于丰富,图像过于复杂不建议使用)
在这里插入图片描述

在这里插入图片描述

CSS背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;/* 清除窗口滚动条 */
				height: 100%; /* 占满整个屏幕*/
				
			}
			body{
				background-image: url(../img/可爱二.jpg);/* 添加背景图 默认情况背景图平铺 */
				background-repeat: no-repeat;/* 不让背景图平铺 */
				background-position:center bottom; /*底部中间 相对于父级定位 可以自定义位置对应background-position:x y*/
			}	
		</style>
	</head>
	<body>
		
	</body>
</html>

缩写 background:背景颜色 背景图片地址 背景是否平铺;background:red url() no-repeat(可以只实现部分例如:background:背景颜色 背景图片地址 )

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员