强大的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属性可以用来控制元素的背景。

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

为了更好的驾驭背景图片，CSS3添加了3个新的background相关属性。

  1. background-clip
  2. background-origin
  3. background-size
  4. 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后的坐标点，默认元素中心点。

边缘轮廓的具体位置可以为如下关键字：

  1. closest-side 渐变中心距离容器最近的边作为终止位置。
  2. closest-corner 渐变中心距离容器最近的角作为终止位置。
  3. farthest-side 渐变中心距离容器最远的边作为终止位置。
  4. 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 个值：

  1. repeat-x 相当于 repeat no-repeat
  2. repeat-y 相当于 no-repeat repeat
  3. repeat 相当于 repeat repeat
  4. space 相当于 space space
  5. round 相当于 round round
  6. no-repeat 相当于 no-repeat no-repeat

space

图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像。

round

随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.

性能

一般我们会用一个的背景小图片不断重复来达到一些效果，为了请求优化一般会把小图片截取到 1px * 1px 大小，但是这样渲染次数太多，有时候会有明显的卡顿，我们可以将尺寸截取大一点这样图片大小没大多少，但是渲染性能却有明显提升。

background-blend-mode

定义该元素的背景图片，以及背景色如何混合。

它就像 PS 中的混合模式。可以做一些 正片叠底，滤色等效果。

它的语法为，单值或者双值（用,分开）。

它的值有：

  1. normal
  2. multiply
  3. screen
  4. overlay
  5. darken
  6. lighten
  7. color-dodge
  8. color-burn
  9. hard-light
  10. soft-light
  11. difference
  12. exclusion
  13. hue
  14. saturation
  15. color
  16. luminosity

background-attachment

如果指定了background-image ，那么background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的。

它的值为：

  1. scroll 默认值，背景相对于元素本身固定， 而不是随着它的内容滚动
  2. local 背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
  3. fixed 背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

我们一般只使用fixed这个值，让背景图片不随着滚动而滚动。

background-position

为每一个背景图片设置初始位置。属性被指定为一个或多个位置值，用逗号隔开。

默认位置是padding-box的左上角。

它的值可以是left，top这些位置关键字，还可以是长度值和百分比。

div {
    background-position: 50% 10px, center, left bottom;
    /* 分别设置三张背景图片的位置 */
}

background-origin

指定背景图片background-image属性的原点位置的背景相对区域。当使用 background-attachment为fixed时，该属性将被忽略不起作用。

它的值可以是：

  1. padding-box 默认值 背景图片的摆放以padding区域为参考
  2. border-box 背景图片的摆放以border区域为参考
  3. content-box背景图片的摆放以content区域为参考

background-clip

设置元素的背景（背景图片或颜色）是否延伸到边框下面。

它的值可以是：

  1. border-box 默认值 背景延伸至边框外沿（但是在边框下层）。
  2. padding-box 背景延伸至内边距外沿。不会绘制到边框处。
  3. content-box 背景被裁剪至内容区外沿。
  4. text 背景被裁剪成文字的前景色。

background-size

设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

对于多背景用,分隔。

它的值可以是长度值和百分比还有下面的关键字

  1. auto 以背景图片的比例缩放背景图片
  2. cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和contain值相反
  3. 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的值可以为：

  1. none
  2. 链接资源，如url(resources.svg#c1)
  3. 盒子值，一共有 7 个
    1. margin-box 使用 margin box 作为引用框
    2. border-box 使用 border box 作为引用框
    3. padding-box 使用 padding box 作为引用框
    4. content-box 使用 content box 作为引用框
    5. fill-box 利用对象边界框作为引用框
    6. stroke-box 使用笔触边界框作为引用框
    7. view-box 使用最近的 SVG 视口作为引用框
  4. 形状函数（相当于 SVG 中的形状元素）
    1. inset()
    2. circle()
    3. polygon()
    4. path()
  5. 盒子和形状结合值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属性让它有动画效果，不过需要变动前后的坐标点数量必须相同。

这里推荐一下我的前端学习交流扣qun：767273102 ，里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2019最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

点击：加入

原文地址：https://blog.51cto.com/14284898/2388063

时间： 2024-10-12 04:00:08

强大的CSS：颜色、背景和剪切的相关文章

css设置背景颜色和处理背景图片样式

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>css设置背景颜色和处理背景图片样式</title> <style> div{ width:1000px; height:500px;/*没有宽高不能加背景图片*/ border:1px solid #000000; /*background-co

css 渐变颜色背景gradient 浏览器兼容

兼容当前五大浏览器的渐变颜色背景gradient的写法<style type="text/css" media="screen"> #gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变,使用图像作为背景 */ background: url(gradient.jpg); /* Webkit: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient

HTML学习笔记8——CSS设置背景图片

注意点:   background:blue: 与 background-color:blue: 不一样! 一.关于background设置:   1)background:blue:   2)background-image:url(图片名称): 当背景既有颜色,又有图片时,哪个在后面哪个就生效,如下例所示: 此处写了“新宋体”的这张图片作为本文涉及到的背景图片. 以图片为背景时,若图片小于页面大小,则图片会一直重复直到铺满为止: 字在后面时,字生效 1 <!DOCTYPE html> 2

【CSS进阶】CSS 颜色体系详解

说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照这个顺序进行,内容十分基础,可选择性跳到相应内容处阅读. 色彩关键字 嗯,色彩关键字很好理解.它表示一个具体的颜色值,且它不区分大小写.譬如这样 color:red 的 red 即是一个色彩关键字. 在 CSS3 之前,也就是 CSS 标准 2,一共包含了 17 个基本颜色,分别是: 而到了 CSS

css实现背景图拉伸

制作页面时,有时需要在表格内插入背景图,我们可以使用CSS进行控制,代码: style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position: right bottom;"其中,./images/counter_bg.jpg为显示图片路径. 如果现在需要实现背景图随表格拉伸而不重复的拉伸填充,如何实现?制作方法:建立表格,并在<table>

CSS控制背景图片100%自适应填充布局

原文地址:http://blog.csdn.net/wd4java/article/details/50537562 .personal_head { width: 100%; height: 35%; background: url("../../../static/img/headbg.jpg") no-repeat; background-size: 100% 100%; position: absolute; filter: progid:DXImageTransform.Mi

CSS实现背景透明而背景上的文字图片不透明

1.用图片则能兼容IE8和IE7 2.用颜色则不能兼容IE8和IE7,并且颜色层不能随着内容层自增长,只能设置一个固定高度 3.用颜色则颜色层不能包含内容层(图片和文字) 1 <!-- wrap最外层设置position:relative --> 2 <div class="wrap"> 3 <!-- bg为背景透明层 --> 4 <div class="bg"></div> 5 <!-- conte

CSS透明背景 不影响文字 支持IE6+Chrome+Firefox+等主流浏览器

你是否也在找ie透明背景的css?很多时候我们网页可能会用到透明的效果,比如一般半透明的白色背景,可能在ie7以上版本没问题,但是现在ie6和ie7的用户非常多,我们不得不考虑,可能出现这种问题时,大家可能更多是用一张半透明图片处理,当然我们的原则是能用代码解决的坚决不用图片,其中缘由就不细细道来.请直接看效果.子曰去哪是使用Windows Virtual PC中Windows XP Mode ie6测试所以可以保证原滋原味支持ie6这个奇葩! 纯css透明背景 效果演示 黑色透明背景白色透明背

兼容多种浏览器的渐变颜色背景

经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景. 下面是当前五大浏览器对 gradient 的支持 Css代码   <style type="text/css" media="screen"> #gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变,使用图像作为背景 */ backg

(●&#39;?&#39;●)??~~~CSS图片背景~~~

目录:§1.1 平铺就是重复  §1.2 图片放在哪里?  §1.3 不许动!  §1.4 一个里面有两个 <style type="text/css"> body {background-image: url(这里填写图片的url地址);} </style> 例如本页背景: <style type="text/css"> body { background-image:url(http://images0.cnblogs.com