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);
![巧用CSS background-image属性制作图形背景](https://www.tjcblog.com/d/file/p/2022/03-10/84df65113c532cb1a6e788da3f7f8491.jpg)
▲平铺的马赛克背景
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能实现的效果绝不用图片来实现的一个主要原因。
以上涉及到的案例图请点击下面的链接:
你觉得文章内容怎么样