介绍
这篇文章将为大家详细讲解有关利用css中背景实现绘制图形的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片,这时候通常就拿起ps就是切切不切。说这种方式麻烦,有用户界面给你切好的情况已经不错,没有的就有自己动手。还可能有需要切一整张超大图的情况。作为一个“优秀”的前端,本着自己动手丰衣足食的理念,下面给大家介绍用背景来绘制这些特的图片
先来看看平时会出现的
通过一下css得到
& lt; div类=癰ox"祝辞& lt;/div>
& lt; style>
.box {
宽度:500 px;
身高:500 px;
背景:url (& # 39; imgurl& # 39;);
background-size: 20%;
}
& lt;/style> 当然现在不切图,直接用css来做
.box {
宽度:500 px;
身高:500 px;
背景:线性渐变(45度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb),
线性渐变(135度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb) 50 px 0,
线性渐变(45度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb) 50 px 50 px,
线性渐变(135度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb) 100 px 50 px;
background-size: 100 px 100 px;
background - color: # fff;
} 我们可以看到会得到与切图一模一样的效果
接下来来看下上面的css为什么这样写
首先我们先理解背景:线性梯度(),在背景中CSS3渐变(梯度)可看做一张背景图片,可理解为背景:url(),而背景图片的可以为多张的,对应我们就可以写多个线性渐变,通过对其颜色的控制来拼接成一个独立的图片块.background-size刷新中可通过逗号分隔,会循环设置对应的线性渐变。
这里需要注意的是,线性渐变是重后往前绘制的,就是说前面颜色的会覆盖后面的颜色。
分析上面的格子背景,我看可以看做在一个4 x4的格子中有两个1 x1的灰格子覆盖在上面。每个灰格子可通过
的基础图案拼成,所以有了如下
背景:线性渐变(45度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb),
线性渐变(45度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb) 50 px 50 px;
这里有个问题,小三角间拼接有缝隙,所以用
图形再拼接一次。
背景:线性渐变(45度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb),
线性渐变(45度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb) 50 px 50 px,
线性渐变(135度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb) 50 px 0,
线性渐变(135度,# cbcbcb 25%, 25%透明,透明的75%,# cbcbcb 75%, # cbcbcb) 100 px 50 px; 最后我们就能得到和上面一样的格子背景。
更多例子
有时候我们需要的背景可能不需要重复,且图形没有规律
如:
这时我们就要对图形的每个角进行分别设置。
.box {
宽度:500 px;
身高:500 px;
背景:线性渐变(黑色,黑色),
线性渐变(黑色,黑色),
线性渐变(黑色,黑色),
线性渐变(黑色,黑色),
线性渐变(黑色,黑色),
线性渐变(黑色,黑色),
线性渐变(黑色,黑色),
线性渐变(黑色、黑色)左底;
平铺方式:不再重演;
background-size: 4 px 20 px, 20 px 4 px; 原理其实就是通过线性渐变绘制每个图形设置位置和大小,最后就能得到想要图像。
关于利用css中背景实现绘制图形的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
