css关于背景的一些常用技巧

来源：互联网发布：nginx http2配置编辑：程序博客网时间：2024/05/29 09:56

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

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

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

#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

日后陆续补充

1 0