css 背景和渐变

k00baa 发布于2019-08-30 15:52 / 1800人阅读

css 背景和渐变 background 背景

所有背景属性都不能继承

在CSS2.1里，background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-position

CSS3开始，又增加了3个新的属性值
注意：反斜杠可以在支持这种写法的浏览器里在position后面接着写background-size

background: [background-color] 
            [background-image] 
            [background-repeat]
            [background-attachment] 
            [background-position] / [ background-size]
            [background-origin] 
            [background-clip];

background-color 背景色
不能继承，其默认值是 transparent

background-image 背景图片
默认值是 none

可设置多幅背景图片 background-image:url(bg_flower.gif),url(bg_flower_2.gif);

background-repeat 背景图片平铺
其值可为（ repeat | no-repeat | repeat-x | repeat-y ）

默认为repeat

background-attachment 背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

其值可为（ fixed | scroll ）

默认值是 scroll，背景会随文档滚动

可以声明图像相对于可视区是固定的（fixed）

background-position 背景定位

不超过两个关键字，水平方向和垂直方向

只出现一个关键字，另一个认为是center

其值可为（ top，bottom，left，right，center，长度值，百分数值）

默认为 0% 0%，即top left ，元素内边距区的左上角(padding-box)

background-size 背景图像尺寸

默认值auto，宽度和高度，只有一个值，第二个被设置为auto

其值可为（长度值，百分数值，cover ，contain ）

cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

background-origin 定位中心点

注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果

默认值 padding-box

其值可为（ padding-box | border-box | content-box ）

background-clip 背景的绘制区域

默认值 border-box ，背景被裁剪到边框盒

其值可为（ border-box | padding-box | content-box ）

背景定位

background-position 扩展语法

> 允许我们指定背景图片`距离任意角的偏移量`,`在偏移量前面指定关键字`

background-position: right 20px bottom 10px;

需要提供一个合适的回退方案,在不支持 background-position 扩展语法的浏览器中,背景图片会紧 贴在左上角(背景图片的默认位置)

background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

background-origin

问题：偏移量与容器的内边距一致

默认情况下,background-position 是以 padding box 为准的

如果把background-origin值改成 content-box,则在 background-position 属性中使用的边角关键字将会以内容区的边缘作为基准(也就是说,此时背景图片距离边角的偏移量就跟内边距保持一致了)

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */ 
background-origin: content-box;

calc()

background: url("code-pirate.svg") no-repeat; 
background-position: calc(100% - 20px) calc(100% - 10px);

伪随机背景

重复平铺的图案有一定规律可循，如下面代码

background: linear-gradient(90deg,
                            #fb3 15%, #655 0, 
                            #655 40%,#ab4 0, 
                            #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;

每80px（即 background-size 的值）重复一次

方法：

把平铺间距最大的贴片安排在最顶层
仍然可以看出图案每隔 240px 就会重复一次,

贴片（多层渐变合成的最终图案中可感知的重复单元）的尺寸实际上就是所有 background-size 的最小公倍数

background: hsl(20, 40%, 90%);
background-image:
 linear-gradient(90deg, #fb3 10px, transparent 0),
 linear-gradient(90deg, #ab4 20px, transparent 0),
 linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

把贴片的尺寸最大化
“蝉原则”：数字最好是“相对质数”，在这种情况下，它们的最小公倍数就是它们的乘积

要达成相对质数，最简单的办法就是尽量选择质数，因为质数跟其他任意数字都是相对质数

gradient 渐变

linear-gradient 线性渐变

语法 ： background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法,必须放最后 */

+ direction/angle 方向或角度
    - direction 使用方向
        + 预定义方向 left,top等
        + 可为起始方向 (left 从左到右 ) | (left,top 对角)
        + 可定义到达方向 - 使用 to 表示 (to right) | (to right bottom ) 
    - angle 使用角度
        * 角度是指水平线和渐变线之间的角度，逆时针方向计算
        * 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变
        ![角度 对应 方向](http://www.runoob.com/wp-content/uploads/2014/07/7B0CC41A-86DC-4E1B-8A69-A410E6764B91.jpg)
+ 至少定义两种颜色结点(起点色，中止色)
    - 设置透明度可为 rgba() 
    - 可指定起止色位置，百分比或长度值 
        + (red 30%,blue 50%) ，则30%-50%间是两种颜色的渐变，其余部分为实色
        + 如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值

background: linear-gradient(#fb3 33.3%, #58a 0, 
                            #58a 66.6%, yellowgreen 0);

等同于：

background: linear-gradient(#fb3 33.3%, #58a 33.3%, 
                            #58a 66.6%, yellowgreen 66.6%);

repeating-linear-gradient 重复的线性渐变

适用于斜向条纹

为这些长度是直接在渐变轴上进行度量的，直接代表了条纹自身的宽度

不论条纹角度如何，在创建双色条纹时都需要四个色标

background: linear-gradient(45deg,
                            #fb3 25%, #58a 0, 
                            #58a 50%,#fb3 0, 
                            #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;

等同于：

background: repeating-linear-gradient(45deg,
                                      #fb3, #fb3 15px, 
                                      #58a 0, #58a 30px);

同色系条纹（明亮度有差异）

主色调和浅色变体组成
方法是：把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹
修改时，只需改动背景色

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

radial-gradient 径向渐变

语法：background: radial-gradient(position, shape size, start-color, ..., last-color);

repeating-radial-gradient 重复的径向渐变

background-image: repeating-radial-gradient(red,green 40px, orange 80px);

云服务器 GPU云服务器背景渐变网页背景渐变背景色渐变 css和html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116521.html

[译]HTML&CSS Lesson7: 设置背景和渐变色

摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...

bang590 2019-08-29 16:54 评论0 收藏0
[译]HTML&CSS Lesson7: 设置背景和渐变色

摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...

jk_v1 2019-08-02 11:40 评论0 收藏0
[译]HTML&CSS Lesson7: 设置背景和渐变色

摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...

Tonny 2019-08-30 15:54 评论0 收藏0
CSS 设计指南学习笔记二

摘要：原文地址本篇文章是笔者的设计指南学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对设计指南进行一些总结，没有看之前第一部分的话也可以从这里传送过去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的《CSS 设计指南》学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 ...

printempw 2019-08-30 12:47 评论0 收藏0
CSS斜切角

摘要：问题斜切角在设计和印刷中是相当受欢迎的样式。当斜切角只存在元素的一侧，并且每个都占据元素的高度的时候，一个箭头的形状产生了，这在按钮和面包屑导航中非常受欢迎。现在，假设我们需要两个斜切角，左右下角分别一个。问题斜切角在Web设计和印刷中是相当受欢迎的样式。它通常是在一个或多个元素的角落切一个45°的角（也就是所谓的斜切角）。特别是最近，扁平化设计的势头压过了拟真设计，也使这种效果...

番茄西红柿 2019-04-23 13:39 评论0 收藏0
CSS渐变之背景、边框、字体渐变

摘要：使用实现背景色渐变边框渐变，字体渐变的效果。定义渐变的颜色，可以使用百分比指定渐变长度。比如则变成了酱子背景色渐变非常简单，但上面的代码中，是加在属性上的。被切割的个部分分布在边框的个区域。使用CSS实现背景色渐变、边框渐变，字体渐变的效果。背景色渐变 .bg-block { background: linear-gradient(to bottom, #F80, #2ED);...

wapeyang 2019-08-29 14:13 评论0 收藏0