CSS背景
文章平均质量分 79
旅行者1024号
穷则在家呆着,达则四处溜达
展开
-
CSS background-repeat属性
城市现在为了评选文明城市,都开始注重城市的市容市貌多种树、多修路,尤其是人行甬道都开始铺设清洁的瓷砖、大理石等一些装饰性设施。我们今天的话题就从甬道上的这些东西开始。Repeat英文意思是“重复”,拿到CSS中就有“平铺”的意思。顾名思义,background-repeat就是“背景平铺”的意思。它是控制背景图片的平铺方式。平铺的概念在现实生活中比比皆是,比如地板砖的平铺、农村二层小洋房墙壁的瓷砖平原创 2017-11-30 16:48:41 · 6984 阅读 · 0 评论 -
CSS linear-gradient线性渐变
人类对美的追求是无限的,色彩的搭配是美的最基本要求,重复产生美的感觉,随机产生美的感觉,单一产生美的感觉。人类用各种办法诠释着美,残缺美、犀利美、规律美…….包括这里要讲的渐变。渐变给人一种舒缓的感觉,它不那么的突兀,给人一种不逼迫、缓缓地感觉。CSS3中引入了渐变的这个词,在CSS3中目前的渐变分为线性渐变和径向渐变。听说还有角向渐变,但那是以后的事。这里我们就来探一下线性渐变和径向渐变...原创 2018-02-19 17:18:56 · 2062 阅读 · 0 评论 -
CSS background-size属性
在生活中size无处不在,某些时候,size很重要……嗯嗯…….我说的是background-size,想歪的同学可以去静静的面壁了。先不管面壁的同学,我们来探探background-size的奥秘。小时候,看过《西游记》之后,做梦都在想着自己也能够拥有孙悟空那能大能小的金箍棒,感觉很是神奇。长大后才发现那只是童话故事,于是不再做梦。做了技术之后,我的梦又延续了,因为技术真的可以做到能大能小。bac原创 2017-12-06 11:43:45 · 1660 阅读 · 0 评论 -
CSS background-clip属性
Clip有“裁剪”的意思,,放到CSS的background中就是裁剪背景。当你看上一套西服,你非常喜欢,于是你一咬牙买了下来,却发现它并不合你的身,穿在你瘦小的身材上它显得有些肥大,这时你就需要裁剪。裁剪西服的工具是剪刀。转换场景,如果你发现背景不合适,裁剪的工具是什么呢?没错,就是这个background-clip。background-clip是CSS3的新属性。它就是一把剪刀,哪里不爽剪哪里原创 2017-12-05 09:48:48 · 2828 阅读 · 0 评论 -
CSS background-origin属性
我在讲解background-position属性时引出了背景图片坐标系的应用。当时说背景图片是相对于坐标原点定位的,而这个坐标原点就位于border-box区域的左上起点,其实这是不严谨的。因为那是默认情况下,而这里要讲解的background-origin属性就是控制这个坐标原点的位置的。Origin有“起源”的意思,而background-origin就有“背景图片起点”的意思。它是告诉浏览器原创 2017-12-02 20:38:48 · 13094 阅读 · 4 评论 -
background简写属性
现在流行组合,什么歌唱团体,TFboys、至上励合等等。background属性也赶时髦,它也有组合。我们知道background有很多的单个属性,有background-position、background-repeat等,我们可以把这些background的这些属性简写到组合中原创 2017-12-10 00:29:42 · 4360 阅读 · 0 评论 -
CSS background-color属性
就color 这个单词就知道,background-color是设置背景颜色的。在CSS 中,它为背景容器设置纯色,这里的纯色指的是非渐变色。话说人靠衣装,马靠鞍。background-color让背景容器显得更加帅气。background-color属性的值有以下几种形式系统定义的颜色名HEX(十六进制)rgb()/rgba()hsl()/hsla()transparent系统定义的颜原创 2017-12-01 11:04:11 · 29107 阅读 · 1 评论 -
CSS background-image属性
但凡牛掰人物出场,都伴随着“Duang”的特技,它们会不停的加特技,加特技,加特技。CSS背景图片的background-image就是这样一位牛人,它一登场肯定也会加“特技”。下面我们来看看它的“特技”;background-image属性值模式background-image的属性值模式就是用来给它加“特技”的。它的值模式有:url()模式linear-gradient()模式repeat原创 2017-12-08 21:47:44 · 45519 阅读 · 0 评论 -
CSS background-position属性
一、坐标系及原点就像CSS的position属性是定位元素一样,background-position属性定位的是背景图片的。他定位的的是由background-image属性定义的背景图片(注意,这里并不是定位由background-color定义的背景颜色)。它的格式基础模型为:background-position:xpos ypos;其中xpos表示x轴(水平位置)方向的坐标,ypos表示y原创 2017-11-27 22:43:39 · 5781 阅读 · 1 评论 -
CSS background-attachment属性
尽管考过了英语四级,但我还是不知道attachment这个单词的意思,真有些忏愧。所以在下笔之前,我查了一下attachment这个单词,attachment有“附着”的意思。那么在我的理解,CSS中background-attachment属性就是控制背景图片的附着的问题。background-attachment属性这位您说了:What Are You Say?好吧,下面开启我们的尬聊模式:对,原创 2017-11-29 23:22:23 · 12664 阅读 · 6 评论 -
CSS radial-gradient径向渐变
回顾前面讲的linear-gradient线性渐变,它控制的是背景容器直线平面的渐变,而这里的radial-gradient径向渐变控制的是背景容器曲线平面的渐变,它和linear-gradient的语法相似。radial-gradient语法:radial-gradient( [ [ circle || <length>] [at <posi...原创 2018-03-13 16:10:54 · 1257 阅读 · 0 评论