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来实现一些简单的背景图，例如：

▲平铺的圆点背景

background: #eee;
background-image: radial-gradient(circle, #ccc 30%, transparent 31%);
background-size: 1em 1em;
background-position: 50% 50%;
background-repeat: repeat;

▲平铺的斜线条背景

background: repeating-linear-gradient(45deg, white, white 10px, #eee 10px, #eee 18px);

▲平铺的马赛克背景

background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.4) 10px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 20px), repeating-linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 10px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 20px), linear-gradient(#ff7f50, #ff7f50);
background-size: 20px 20px;

▲指定4种颜色的背景

background: linear-gradient(45deg,#79cce9 40%,#c0def1 40%,#c0def1 50%, #f0e5d4 50%,#f0e5d4 60%,#e3c6c2 60%);
background-repeat: no-repeat;

▲彩虹色背景

background: linear-gradient(to left,#be0909 10%,#be0974 10%,#be0974 20%,#da6a57 20%,#da6a57 30%,#eebc31 30%,#eebc31 40%,#92a25b 40%,#92a25b 50%,#46a7c0 50%,#46a7c0 60%,#3f51b5 60%,#3f51b5 70%,#673ab7 70%);

▲看来有凹凸线条的背景

background: #8e4646;
background-image: repeating-linear-gradient(to right,transparent,transparent 22px,#602626 22px,#602626 24px,#b37373 24px,#b37373 25px);

css background-image可以实现这些简单的背景图，如果稍微复杂的海报背景呢，同样也是可以做到的，例如下面这张图：

背景图像有白色的斜线条，左上角有一个黄色的三角，右下角是一个蓝色的大三角形，上下两个不同大小的半透明的绿色圆形等等，中间还有一个大的白色背景加上阴影，拆解一下再，可以先实现最底层的背景图：

<div class="qq_bg">
</div>

<style>
.qq_bg {
    width: 480px;
    height: 720px;
    margin: 40px auto;
    overflow: hidden;
    position: relative;
    background: #92d0f5;
    background-image: linear-gradient(rgb(255, 223, 112, .5), rgb(255, 223, 112, .5)), radial-gradient(circle, rgb(6, 207, 191, .5) 50%, transparent 52%), radial-gradient(circle, rgb(6, 207, 191, .5) 50%, transparent 52%), linear-gradient(135deg, transparent 53%, #02adff 30%, #02adff 60%), linear-gradient(313deg, transparent 30%, #ffdf70 30% ), linear-gradient(45deg, transparent 30%, #02adff 30%, #02adff 60%), repeating-linear-gradient(45deg, #fff, #fff 2px, #92d0f5 2px, #92d0f5 8px );
    background-position: bottom -9px left 18px, bottom 111px left -16px, top -23px left 128px, right bottom 20%, top -32px left -126px, right -24px bottom, top left;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size: 67px 20px, 140px 140px, 58px 58px, 50% 30%, 50% 21%, 50% 14%, 100%;
}
</style>

其他剩下的部分，就可以用伪元素:after，:before

.qq_bg:before {
    content: "";
    width: 86%;
    height: 86%;
    background: #fff;
    position: absolute;
    left: 7%;
    top: 7%;
    box-shadow: rgb(0 0 0 / 50%) 2px 2px 5px;
    background-image: linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc);
    background-size: 63% 1px, 44% 1px, 1px 63%, 1px 43%;
    background-position: right 40px top 40px, bottom 40px left 40px, left 40px bottom 40px, right 40px top 40px;
    background-repeat: no-repeat;
    z-index: 9;
}
.qq_bg:after {
    content: "";
    width: 136%;
    height: 3px;
    background: #ffdf70;
    position: absolute;
    right: -12%;
    top: 215px;
    transform: rotate(-45deg);
}

一张海报图用css就简单实现了，CSS画背景图的好处就在于想改什么颜色，改什么形状，只要稍微调整一下css就可以，而且还比图片打开的速度还要快，这也是为什么我坚持css能实现的效果绝不用图片来实现的一个主要原因。

以上涉及到的案例图请点击下面的链接：

背景图 →https://www.tjcblog.com/background.html

海报图 →https://www.tjcblog.com/haibao.html