7 设置元素的背景及雪碧（精灵）图使用

最新推荐文章于 2022-02-08 08:32:31 发布

丨Anna丨

最新推荐文章于 2022-02-08 08:32:31 发布

阅读量412

点赞数

分类专栏：前端重拾 # CSS 文章标签： css

本文链接：https://blog.csdn.net/u014331138/article/details/108317178

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 0 订阅

订阅专栏

1 设置元素的背景及雪碧图使用

1.1 背景颜色background-color

background-color属性用来为元素设置背景颜色。需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。

background-color: red;

1.2 背景图片background-image

background-image可以为元素指定背景图片和background-color类似，这不过这里使用的是一个图片作为背景。需要一个url地址作为参数，url地址需要指向一个外部图片的路径，相对路径写在那就相对于那个文件。

background-image: url(1.jpg);

特点：

（1）如果图片大于内容区，则会显示图片的最上角

（2）如果图片和内容区一样大，则背景图片则会充满整个文件。

（3）如果图片小于内容区大小，则会默认让图片平铺充满内容区

（4）可以同时制定背景颜色和背景图片，这样背景颜色会作为背景图片的底色。一般情况下设置背景图片时同时都会指定一个背景颜色。

1.3 背景图片的重复方式background-repeat

background-repeat用于控制背景图片的重复方式。如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。

  可选值：
      – repeat：默认值，图片左右上下平铺
      – no-repeat：只显示图片一次，不会平铺，有多大就显示多大
      – repeat-x：沿x轴水平平铺一张图片
      – repeat-y：沿y轴水平平铺一张图片

background-repeat：no-repeat;

1.4 背景图片定位

background-position用来精确控制背景图片在元素中的位置。可以通过三种方式来确定图片在水平方向和垂直方向的起点。

可选值：

– 关键字：top right bottom left center（可以使用其中至少两个值来指定图片的位置,如果只指定一个值，则第二个值默认为center）

background-position: center center

– 百分比

background-position: 10% 10%;

– 数值（可以指定两个偏移量，第一个值为水平偏移量，第二个值为垂直偏移量，内容区左上角坐标为（0,0），可以指定负值，超过内容区部分则不会显示）

background-position: 100px 100px;

1.5 设置背景图片是否随页面滚动 background-attachment

background-attachment用来设置背景图片是否随页面滚动.

可选值：
– scroll：随页面滚动,默认值
– fixed：不随页面滚动，会固定在页面的某一个位置（当背景图片设置为fixed,背景图片永远相对于浏览器的窗口，一般不随窗口滚动的背景图片，一般都设置给body,不设置给其他元素）

1.7 设置背景的渲染的起始位置background-origin

可选值：

– border-box 从border开始渲染
– padding-box 从padding开始渲染，默认值
– content-box 从content开始渲染

1.8 设置背景裁剪位置background-clip

可选值：

– border-box 从border开始剪裁，默认值
– padding-box 从padding开始剪裁
– content-box 从content开始剪裁

特殊：该属性只在谷歌浏览器中有效

-webkit-background-clip: text;

示例：

	<head>
		<meta charset="UTF-8">
		<title>按文本截背景</title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 100px;
				color: rgba(255,255,255,0.2);
				font: bold 40px "微软雅黑";
				background: transparent url(img/1.jpg) no-repeat center center;
				-webkit-background-clip: text;
			}
		</style>
	</head>
	<body>
		<div class="box1">你好啊</div>
	</body>

效果：

IE中效果：

1.9 背景的简写background

background是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求，也没有数量的要求，不写的属性就设置默认值。

语法：

background: green url(1.jpg) no-repeat center center fixed;

2 雪碧（精灵）图使用

通过背景图片的定位可以实现雪碧图/精灵图片的使用。

示例：

使用如下精灵图片设置图标

	<head>
		<meta charset="UTF-8">
		<title>精灵图片</title>
		<style type="text/css">
			.icon{
                width: 81px;
				height: 81px;
				display: inline-block;
			}
			
			.icon-view{
				background: transparent url(view.png) no-repeat;
			}
			
			.icon-pay{
				background: transparent url(view.png) no-repeat -81px 0px;
			}
		</style>
	</head>
	<body>
		<i class="icon icon-view"></i>
		<i class="icon icon-pay"></i>
	</body>

效果：

丨Anna丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
7 设置元素的背景及雪碧（精灵）图使用

1 设置元素的背景1.1背景颜色background-color background-color属性用来为元素设置背景颜色。需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。background-color: red;1.2背景图片background-image background-image可以为元素指定背景图片和background-color类...
复制链接

扫一扫