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

▲平铺的圆点背景

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能实现的效果绝不用图片来实现的一个主要原因。

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

背景图 →background-image 制作海报图

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

原文：巧用CSS background-image属性制作图形背景_网页制作_青青个人博客

巧用CSS background-image属性制作图形背景相关推荐

巧用CSS的Border属性制作特效菜单
许多应用软件的主菜单都具有这样的效果,通常是暗色的,一旦鼠标移到菜单上,立即变明亮:鼠标不在菜单上时是平面的,一旦鼠标移到菜单上,菜单条立即变为立体,从而增强了菜单的效果.你是否也想使网页中的导航菜单 ...
巧用CSS的Border属性
. 作者:冯永曜来源:黄山村夫制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
CSS——background系列属性
关于颜色能够用英语单词来表述的颜色都是简单的颜色用rgb方法来表示: 光学显示器每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同颜色. 用逗号隔开, r, g, b的值,每个值的取值范围 ...
CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 ba ...
html css设置背景图片,css background之设置图片为背景技巧
Bac公斤round是什么含义,翻译过来有配景意义.异样在css内中作为css属性一成员同样是有后援含义,何况是设置装备摆设后盾图片.布景色调.布景图片截取等款式. 起首先来看看bac公斤round有 ...
浅谈CSS background参数属性。
CSS1 中关于background 属性的参数有以下几种: 1. background-color:设置元素的背景色. 2. background-image:url()设置背景图像. 3 ...
巧用css的border属性完成对图片编辑功能的性能优化
一.需求场景: 最近闲来无事,boss提出了一个要求,研究相关代码并完成一个关于编辑图片功能的性能优化,该功能的主要界面展示如下: 通过了几分钟的短暂试用,发现就是一个简单的裁剪并保存用户选择并上传的 ...
舞动你的文字,巧用CSS中marquee属性
语法:<marquee> -</marquee> 使用移动属性marquee,不仅仅可以舞动你的文字,还可以应用于图片,表格等等. <marquee direction= ...
background系列属性（background-color背景颜色、background-image背景图片、background-repeat重复方式以及background-position）
background-color背景颜色背景颜色属性. css2.1中,颜色的表示方法有哪些?一共有三种:单词.rgb表示法.十六进制表示法用英语单词来表示: 能够用英语单词来表述的颜色,都是简单 ...

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

巧用CSS background-image属性制作图形背景相关推荐

最新文章

热门文章