CSS——background系列属性

最新推荐文章于 2022-12-07 14:05:33 发布

mintsolace

最新推荐文章于 2022-12-07 14:05:33 发布

阅读量1.1k

点赞数

分类专栏：学习笔记 css 文章标签： css

本文链接：https://blog.csdn.net/mintsolace/article/details/78398271

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

css

32 篇文章 1 订阅

订阅专栏

关于颜色

能够用英语单词来表述的颜色都是简单的颜色
用rgb方法来表示：
光学显示器每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同颜色。
用逗号隔开, r, g, b的值，每个值的取值范围0~255，一共256个值。
如果此项值是255，就说明是纯色。

红色：

background-color: rgb(255,0,0);

绿色：

background-color: rgb(0,255,0);`

蓝色：

background-color: rgb(0,0,255);

白色：

background-color: rgb(255,255,255);

黑色：(光学显示器每个元件都不发光，所以黑色。)

background-color: rgb(0,0,0);

颜色可以叠加，比如黄色就是红色和绿色的叠加：

background-color: rgb(255,255,0);

红、绿、蓝三种颜色的不同比例叠加：

background-color: rgb(111,222,123);

十六进制表示法
红色

background-color: #ff0000;

所有用#开头的值都是16进制
16进制表示法是以两位两位为单位，看r, g, b，但是没有逗号隔开。
ff就是10进制的255，00就是10进制的0，00就是10进制的0，所以等价于rgb(255,0,0);

10进制中的基本数字，一共10个：0、1、2、3、4、5、6、7、8、9
16进制中的基本数字，一共16个：0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16进制中，13这个数字表示1个16和3个1，即19。这是位权的概念，首位表示多少个16，末尾表示多少个1。
16进制中的28等于10进制的？216+8=40
16进制中的2b等于10进制的？216+11=43
16进制中的af等于10进制的？216+15=175
16进制中的ff等于10进制的？1516+15=255

background-color: #123456;

等价于：

background-color: rgb(18,52,86);

任何一种16进制表示法，都能够换算成rgb表示法。也就是说两个表示法的颜色数量一样。
16进制可以简化为3位，所有#aabbcc的形式都能够简化为#abc;

background-color: #ff0000;

等价于

background-color: #f00;

background-color: #112233;

等价于

background-color: #123;

只能上面的方法简化，下面的两例无法简化：

background-color: #222333;

background-color: #123123;

background-image属性
用于给盒子加上背景图片：

background-image: url(images/wuyuetian.jpg);
url()表示网址, uniform resources locator统一资源定位符
images/wuyuetian.jpg就是相对路径。

	<style type="text/css">
		div{
			width: 500px;
			height: 500px;
			border: 1px solid #000;
			background-image: url(images/wuyuetian.jpg);
		}
	</style>
</head>
<body>
	<div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</div>
</body>

背景图天生是会被平铺满的，背景图的溢出浏览器不会报错
padding的区域有背景图。

background-repeat属性：
设置背景图是否重复以及其重复方式
background-repeat属性有三种值：
backgound-repeat: no-repeat; 不重复
backgound-repeat: repeat-x; 横向重复
backgound-repeat: repeat-y; 纵向重复

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-image: url(images/bg1.png);/*bg1 bg2 bg3都是渐变图片平铺*/
			background-repeat: repeat-x;
		}
		.nav{
			width: 960px;
			height: 40px;
			margin: 100px auto;
		}
		.nav ul{
			list-style: none;
		}
		.nav ul li{
			float: left;
			text-align: center;
			line-height: 40px;
			width: 120px;
			height: 40px;
		}
		.nav ul li a{
			display: block;
			width: 120px;
			height: 40px;
			background-image: url(images/bg2.png);
			text-decoration: none;
			color: white;
		}
		.nav ul li a:hover{
			background-image: url(images/bg3.png);
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li><a href="">网页栏目</a></li>
			<li><a href="">网页栏目</a></li>
			<li><a href="">网页栏目</a></li>
			<li><a href="">网页栏目</a></li>
			<li><a href="">网页栏目</a></li>
			<li><a href="">网页栏目</a></li>
			<li><a href="">网页栏目</a></li>
		</ul>
	</div>
</body>

background-position：背景定位属性
background-position: 向右移动量, 向下移动量;
定位属性可以是负数：
background-position: -50px -120px;

	<style type="text/css">
		div{
			width: 300px;
			height: 300px;
			border: 1px solid #000;
			background-image: url(images/wuyuetian.jpg);
			background-repeat: no-repeat;
			background-position:-50px -120px;
		}
	</style>
</head>
<body>
	<div></div>
</body>

CSS精灵原理
CSS Sprite是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS背景定位来显示需要显示的图片部分。优点是减少了http请求，比如4张小图片原本需要4个http请求，但是用了CSS精灵，小图片变为一张图，http请求只有一个了。可以用fireworks精确控制精灵。

用单词描述：
background-position: 描述左右的词描述上下的词
即：background-position: right bottom; 表示右下角
左下角：background-position: left bottom;

position后面可以跟方位名词，它们之间可以没有上下顺序。
position如果只写一个值，另外一个是默认居中的。
position后面也可以跟px值，但必须有顺序，x在前面，y在后面，不能颠倒。

通栏banner：

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			height: 465px;
			background-image: url(images/banner.jpg);
			background-repeat: no-repeat;
			background-position: center top;
		}
	</style>
</head>
<body>
	<div></div>
</body>

通栏banner做成背景的好处是没有滚动条

background-attachment属性：
background-attachment: scroll | fixed
scroll: 背景图像是随对象内容滚动
fixed: 背景图像固定
示例：html{background-image: url(…); background-attachment: fixed; }

background综合属性：
background: red url(1.jpg) no-repeat 100px 100px fixed;
等价于：
background-color: red;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
background-attachment: fixed;

可以任意省略部分：
background: red;
background: blue url(images/1,jpg) no-repeat 100px 100px;

两个数字不能分开，其他的顺序可以调整。
如果一个盒子既有背景图片又有背景颜色，实际以显示图片为主，富余的地方用颜色填充。

mintsolace

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS——background系列属性

关于颜色 1. 能够用英语单词来表述的颜色都是简单的颜色 2. 用rgb方法来表示：光学显示器每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同颜色。用逗号隔开, r, g, b的值，每个值的取值范围0~255，一共256个值。如果此项值是255，就说明是纯色。
复制链接

扫一扫

专栏目录