CSS:颜色、背景和剪切
颜色
CSS 中可以改变文字的颜色还有元素的背景颜色。可以用颜色关键字来定义颜色,如red
,但是这些颜色关键字并不常用。
transparent
transparent
可以让文字或背景变的完全透明的颜色,它就像rgba(0,0,0,0)
的缩写。
currentColor
currentColor
代表原始的color
属性的计算值。比如当前元素color
为红色,背景色设置为currentColor
,那么现在背景色也为红色。
rgb、rgba
颜色还可以用rgb
函数表示,如rgb(255, 255, 255)
代表白色,它每个参数的取值范围是0
到255
,它是用不同比例的红、绿、蓝来组成期望颜色。
rgba
函数代表红-绿-蓝-阿尔法,其中的a
是透明度,取值范围是0
到1
。
除了使用rgb
函数,还可以使用 16 进制来表示,它的语法是#RRGGBB
,如果#f3f3f3
,代表f3
(16 进制)数量的红-绿-蓝。如果红-绿-蓝数值两两相等,如#ffffff
,就可以简写成 3 位 16 进制的形式#fff
。在高版本的浏览器还可以用 16 进制表示透明度#RRGGBBAA
,AA
的取值范围是0
到255
,如果两两相等也可以简写成#RGBA
形式。
hsl、hsla
hsl
函数是用色相-饱和度-明度(Hue-saturation-lightness)来表示颜色,HSL
相比RGB
的优点是更加直观:你可以估算你想要的颜色,然后微调,比如要找到一个颜色的相近色,只需调整一下明度就行了。
色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。这个角度作为一个无单位的 被给出,大致按照数值红、橙、黄、绿、青、蓝、紫变化节奏。取值范围是0
到360
饱和度,取值0%
到100%
,100% 是满饱和度,而 0% 是一种灰度。 明度,取值0%
到100%
,100% 明度是白色, 0% 明度是黑色,而 50% 明度是“一般的”。
hsla
和rgba
相似其中的a
设置透明度,取值范围也是0
到1
。
系统颜色
系统颜色就是系统的颜色,不同的系统支持的颜色可能不同,一般很少使用。但是我们可以利用它实现系统主题风格类似的 Web 组件皮肤效果,来以假乱真。
背景
CSS2.1中有5个background
属性可以用来控制元素的背景。
background-color
background-image
background-repeat
background-attachment
background-position
为了更好的驾驭背景图片,CSS3添加了3个新的background
相关属性。
background-clip
background-origin
background-size
background-blend-mode
CSS3 中还添加了多背景渐变等等新特性。
background-image
为元素设置一个或多个背景图像。background-image
在background-color
之上、border
之下渲染。也就是一个同时设置了background-color
和background-image
那么background-image
会覆盖background-color
。
background-image
的值是一个图片或多个图片(用,
分隔)。
div {background-image: url("a.jpg"), url("b.jpg");
}
linear-gradient()
创建一个表示两种或多种颜色线性渐变的图片。CSS 渐变没有固定大小也没有固定宽高比,它只等设置渐变角度、渐变颜色和渐变梯度。
linear-gradient
的语法是[角度(角度或关键字)], 颜色 [梯度]
,它们用,
分隔,角度可选默认时从上到下渐变。
颜色关键字是to left
,to top
,to left top
等位置关键字。
div {background-image: linear-gradient(90deg, rgba(255, 255, 255, .5), orange 70%, #000), linear-gradient(red, orange 70%, #000);
}
repeating-linear-gradient()
一个由重复线性渐变组成的图片。它的语法和linear-gradient
类似。
div {background-image: repeating-linear-gradient(-45deg,transparent,transparent 25px,#000 25px,#000 50px);
}
radial-gradient()
创建一个径向渐变(由原点(渐变中心)辐射开的颜色渐变)的图片。
radial-gradient()
的语法是边缘轮廓的具体位置 形状 渐变中心
后面是颜色
用,
分隔。
div {background: radial-gradient(circle closest-side at 50px 30px, yellow, red 5%, orange, #fff, #000);
}
其中边缘轮廓的具体位置 形状 渐变中心
都是可选。
形状值可以为circle
和ellipse
默认ellipse
。
渐变中心是at
后的坐标点,默认元素中心点。
边缘轮廓的具体位置可以为如下关键字:
closest-side
渐变中心距离容器最近的边作为终止位置。closest-corner
渐变中心距离容器最近的角作为终止位置。farthest-side
渐变中心距离容器最远的边作为终止位置。farthest-corner
渐变中心距离容器最远的角作为终止位置。
默认是farthest-corner
。
div {position: relative;width: 262px; height: 262px;border-radius: 50%;background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);background-size: 50% 100%, 100% 50%, 100% 100%;
}
div:after {position: absolute;top: 50%; left: 50%;margin: -35px;border: solid 1px #d9a388;width: 68px; height: 68px;border-radius: 50%;box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;background: #b5ac9a;content: '';
}
repeating-radial-gradient()
创建一个从原点辐射的重复渐变组成的图片 。它类似于radial-gradient
并且采用相同的参数,但是它会在所有方向上重复颜色,以覆盖其整个容器。
div{background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
}
conic-gradient()
创建一个锥形渐变的图片。conic
渐变类似于radial
渐变,但是它的颜色位于圆的周围。
它的语法是:[from 角度]? [at 位置]?, 颜色 角度...
div{
background: conic-gradient(from 0deg at 50px 100px, orange 0.2turn, #fff 0.09turn 0.3turn, orange 0.27turn 0.54turn);
border-radius: 50%;
}
background-repeat
定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。
它有 6 个值:
repeat-x
相当于repeat no-repeat
repeat-y
相当于no-repeat repeat
repeat
相当于repeat repeat
space
相当于space space
round
相当于round round
no-repeat
相当于no-repeat no-repeat
space
图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position
属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像。
round
随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.
性能
一般我们会用一个的背景小图片不断重复来达到一些效果,为了请求优化一般会把小图片截取到 1px * 1px 大小,但是这样渲染次数太多,有时候会有明显的卡顿,我们可以将尺寸截取大一点这样图片大小没大多少,但是渲染性能却有明显提升。
background-blend-mode
定义该元素的背景图片,以及背景色如何混合。
它就像 PS 中的混合模式。可以做一些 正片叠底,滤色等效果。
它的语法为,单值或者双值(用,
分开)。
它的值有:
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
background-attachment
如果指定了background-image
,那么background-attachment
决定背景是在视口中固定的还是随包含它的区块滚动的。
它的值为:
scroll
默认值,背景相对于元素本身固定, 而不是随着它的内容滚动local
背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动fixed
背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。
我们一般只使用fixed
这个值,让背景图片不随着滚动而滚动。
background-position
为每一个背景图片设置初始位置。属性被指定为一个或多个位置值,用逗号隔开。
默认位置是padding-box
的左上角。
它的值可以是left
,top
这些位置关键字,还可以是长度值和百分比。
div {background-position: 50% 10px, center, left bottom;/* 分别设置三张背景图片的位置 */
}
background-origin
指定背景图片background-image
属性的原点位置的背景相对区域。当使用 background-attachment
为fixed
时,该属性将被忽略不起作用。
它的值可以是:
padding-box
默认值 背景图片的摆放以padding区域为参考border-box
背景图片的摆放以border区域为参考content-box
背景图片的摆放以content区域为参考
background-clip
设置元素的背景(背景图片或颜色)是否延伸到边框下面。
它的值可以是:
border-box
默认值 背景延伸至边框外沿(但是在边框下层)。padding-box
背景延伸至内边距外沿。不会绘制到边框处。content-box
背景被裁剪至内容区外沿。text
背景被裁剪成文字的前景色。
background-size
设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
对于多背景用,
分隔。
它的值可以是长度值和百分比还有下面的关键字
auto
以背景图片的比例缩放背景图片cover
缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和contain
值相反contain
缩放背景图片以完全装入背景区,可能背景区部分空白
background
一种简写属性,用于一次性集中定义各种背景属性。它可以简写的属性有background-clip
、background-color
、background-image
、background-origin
、background-position
、background-repeat
、background-size
,和background-attachment
。
简写的方式有:
color
image repeat
box color
repeat position[ / size]? image
image position[ / size]? repeat attachment clip origin
color image position[ / size]? repeat attachment clip origin
clip-path
clip-path
用来剪切元素,代替了现在已经弃用的剪切clip
属性。它创建一个剪切区域,区域内的部分显示,区域外的隐藏。
clip-path
的值可以为:
none
- 链接资源,如
url(resources.svg#c1)
- 盒子值,一共有 7 个
margin-box
使用 margin box 作为引用框border-box
使用 border box 作为引用框padding-box
使用 padding box 作为引用框content-box
使用 content box 作为引用框fill-box
利用对象边界框作为引用框stroke-box
使用笔触边界框作为引用框view-box
使用最近的 SVG 视口作为引用框
- 形状函数(相当于 SVG 中的形状元素)
inset()
circle()
polygon()
path()
- 盒子和形状结合值
clip-path: padding-box circle(50px at 0 100px);
clip-path
用的最多的值就属polygon
函数,它的参数由一堆x y
坐标点组成。
如clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
。是一个三角形。它可以接受无限个参数,每个参数都是x y
坐标,最终显示的形状就是这些坐标连接成的形状。
clip-path
也可以使用transition
属性让它有动画效果,不过需要变动前后的坐标点数量必须相同。
CSS:颜色、背景和剪切相关推荐
- php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- html背景图片横屏,CSS背景颜色 背景图片 居中 重复 固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法)
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
- CSS控制背景颜色和背景图像的方法
Web前端培训中比较重要的一环是网页的设计,网页能通过背景图像给人留下第一印象,如节日题材的网站一般采用喜庆祥和的图片来突出效果,所以在网页设计中,控制背景颜色和背景图像是一个很重要的步骤.下面将详细 ...
- css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- CSS 给背景图加颜色遮罩
CSS 给背景图加颜色遮罩 <div class="container"></div> 设置background-blend-mode:multiply; ...
- CSS设置背景颜色 拼接 (一半黑一半白) 条纹 渐变
CSS设置背景颜色 拼接 (一半黑一半白) 条纹 渐变 首先下面是用到的css样式 线性渐变 这个属性我还说不明白 我就简单的使用一下 有兴趣的搜索CSS线性渐变就OK background-imag ...
- CSS的背景(背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定(图片附着),背景复合写法)
CSS的背景 通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...
- Css的背景(背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定)
通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...
最新文章
- matplotlib中文文档_python绘图库——Matplotlib及Seaborn使用(入门篇1)
- Python根据多个空格Split字符串
- 【Groovy】自定义 Xml 生成器 BuilderSupport ( 创建 XmlNode 节点 | 管理 XmlNode 节点并将根节点转为 Xml 信息 | 完整代码示例 )
- 获取用户之间关系——使用followerway
- Discuz添加自定义模板广告
- lombok 生成代码_使用Project Lombok减少Java应用程序中的样板代码
- java timezone_Java TimeZone getAvailableIDs()方法与示例
- mysql hugepage_因未配置Hugepage会话数添增悲剧案例
- epoll, NIO,AIO
- 函数计算 GB 镜像秒级启动
- 新手干货:Vue - 常用指令
- 读书笔记《松本行弘的程序世界》
- abab的四字成语_abab式的四字词语
- 【C语言】深度剖析数据在内存中的存储
- 运动目标检测 混合高斯模型
- 已解决[W:11:55:47.235 NotebookApp] Cannot bind to localhostusing 127.0:0.1 as defaultip[winError 10055]
- SQL Server developer和enterprise有什么区别?以及各个版本的定义
- mysql存储过程给多个变量赋值_MySQL存储过程如何进行变量的定义和赋值
- 想看的公众号文章被删了怎么办?
- 图片无损放大软件哪个好?图片放大不失真这样做