css关于背景的一些常用技巧_css 背景技巧-优快云博客

本文介绍了两种实用的CSS技巧：一是如何通过设置背景颜色来延伸渐变效果，确保即使内容高度超过背景图像也能保持一致的视觉效果；二是如何利用背景属性使图片以小图标形式并实现垂直居中显示。

一：若需要一个图片作为背景，而且有垂直方向的渐变效果，可渐变图像的高度是固定的，所以如果页面内容

的长度超过了图像的高度，那么渐变就会突然中止，若拉伸图像，会失真。

方案：添加一个背景色，与渐变底部颜色相同（原理：背景图像总是出现在背景颜色之上）

	#all{
		background-image: url('....');
		background-repeat:no-repeat;
		background-color: rgb(255,255,255);
		width: 1300px;
		height: 2667px;
		margin-left: auto;
		margin-right: auto;
	}

二：希望图片以指示符类型出现

	#one{
		width: 20px;
		height: 20px;
		padding-left: 10px;
		background-image: url('...');
		background-repeat: no-repeat;
		background-position: left center;
		background-color: blue;
	}

其中，padding-left就是图片的实际宽度，这样，就可以让图片以小图标的形式出现在左侧并且结合background-position有垂直居中效果。

简洁写法：background:blue url() no-repeat left center

日后陆续补充