巧用CSS background-image属性制作图形背景

先看一张广告图，这是我们平时在浏览网页的时候，经常见到的一种文字广告设计，在文字周围绕着白色线条，我想大多数设计师可能就直接在ps中画一个png图片，再用css background-image 背景属性插入图片链接来实现。

但今天这篇文章，我要用background-image 来画这个白色线条框。

background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
background-size: 1px 130px, 66px 1px, 66px 1px, 1px 17px, 1px 20px;
background-position: 3px 30px, 3px 30px, 3px 160px, 68px 30px, 68px 140px;
background-repeat: no-repeat;

 

• background-image 创建linear-gradient线性渐变，因为颜色需要指定两种以上，这里是白色的，所以linear-gradient写入了两次#fff白颜色。
• background-size 指定背景图形的大小，可以用像素px，或者百分比为单位。
• background-position 指定背景图像的位置，四个方向 left、top、right、bottom，也可以用像素0px 0px和百分比x% y%，第一个值是水平位置，第二个值是垂直位置。
• background-repeat 属性设置是否及如何重复背景图像，repeat（默认属性值）repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat顾名思义，就是不重复，背景图像将仅显示一次。

在了解了background这些属性后，我们就可以在html前端页面中用css来实现一些简单的背景图，例如：