html背景位置渐变,CSS3（背景和渐变）

CSS3

1.背景

1.1背景图像区域(background-clip)

语法

background-clip:border-box;

值

值

意

border-box

背景被裁剪到边框

padding-box

背景被裁剪到内边距

content-box

边框被裁剪到内容

1.2背景图像定位(background-origin)

语法

background-origin:border-box;

值

值

意

border-box

边框处起定位

padding-box

内边距处起定位

content-box

内容处起定位

配合前篇中的css背景中的1.5.

1.3背景图像大小(background-size)

语法

有两个值，写一个值第二个值自动auto

background-origin:100%;

值

意

1px

数值

100%

%

cover

缩放多余裁剪。如何裁剪取决定位。

contain

缩放不裁剪，图片全显示。

1.3多重背景图像

语法

background-image:url(),url();

英文状态下逗号隔开，谁在前谁显示再前。

1.4 简写

语法顺序

background：颜色 位置 尺寸 填充样式 定位 从哪裁剪 图片状态 图片地址；

background：color position size repeat origin clip attachment image；

background:#f00 center 50% no-repeat content-box content-box fixef url();

2.渐变

2.1 线性渐变(linear-gradient(方向，颜色，颜色);)

2.1.1上下渐变

语法

background:-webkit-linear-gradient(#f00,#00f);

background: -moz-linear-gradient(#f00,#00f);

background: -o-linear-gradient(#f00,#00f);

background: linear-gradient(#f00,#00f);

不用写方向直接写颜色就行，颜色可是多个值。

2.1.2左右渐变

语法

background:-webkit-linear-gradient( left#f00,#00f);

background: -moz-linear-gradient( right,#f00,#00f);

background: -o-linear-gradient( right,#f00,#00f);

background: linear-gradient(to right,#f00,#00f);

兼容问题，不同内核不同写法

2.1.3对角渐变

语法(如：左上到右下的写法)

background:-webkit-linear-gradient( left top,#f00,#00f);

background: -moz-linear-gradient( right bottom,#f00,#00f);

background: -o-linear-gradient( right bottom ,#f00,#00f);

background: linear-gradient(to right bottom,#f00,#00f);

2.1.4角度渐变

语法

background:-webkit-linear-gradient( 45deg,#f00,#00f);

background: -moz-linear-gradient( 45deg,#f00,#00f);

background: -o-linear-gradient( 45deg,#f00,#00f);

background: linear-gradient( 45deg,#f00,#00f);

官方：

0deg 从下向上

90deg 从左向右

180deg 从上向下

-90deg 从右向左

webkit：

0deg 从左向右

90deg 从下向上

180deg 从右向左

-90deg 从上向下

== 带有内核的写到前面，默认写在后边，解决问题。==

2.1.5渐变色节点控制

语法

background:-webkit-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);

background: -moz-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);

background: -o-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);

background: linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);

第一个颜色值不写节点度默认0%，最后一个则是100%

2.1.6渐变色透明度

语法

background:-webkit-linear-gradient( 45deg,#f00,#f000);

background: -moz-linear-gradient( 45deg,#f00,#f000);

background: -o-linear-gradient( 45deg,#f00,#f000);

background: linear-gradient( 45deg,#f00,#f000);

我们可以用rgba的值来写，第一种 rgba(255,255,255,1) 第二种 #FFFF

2.1.7重复渐变(repeating-linear-gradient();)

语法

background:-webkit-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);

background: -moz-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);

background: -o-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);

background: repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);

重复多少遍 取决最后一个百分比

2.2径向(半径)渐变(radial-gradient(颜色颜色);)

从内向外渐变

2.2.1渐变基本语法

语法

background:-webkit-radial-gradient(#f00 10%,#00f 50%);

background: -moz-radial-gradient(#f00 10%,#0f 50%);

background: -o-radial-gradient(#f00 10%,#00f 50%);

background: radial-gradient(#f00 10%,#00f 50%);

这里面的%是中心点到边界的长度%

2.2.2渐变的形状

语法

background:-webkit-radial-gradient(circle,#f00 10%,#00f 50%);

background: -moz-radial-gradient(circle,#f00 10%,#0f 50%);

background: -o-radial-gradient(circle,#f00 10%,#00f 50%);

background: radial-gradient(circle,#f00 10%,#00f 50%);

只有两个形状 圆(circle)和椭圆(ellipse)，椭圆是默认值

2.2.3渐变的尺寸( 值%看那个边或角)

语法

background:-webkit-radial-gradient(closest-side circle,#f00 10%,#00f 50%);

background: -moz-radial-gradient(closest-side circle,#f00 10%,#0f 50%);

background: -o-radial-gradient(closest-side circle,#f00 10%,#00f 50%);

background: radial-gradient(closest-side circle,#f00 10%,#00f 50%);

值

意

closest-side

最近边

farthest-side

最远边

closest-corner

最近角

farthest-corner

最远角

形状和尺寸是一个属性

2.2.4渐变的中心位置

语法

background:-webkit-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

background: -moz-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);

background: -o-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

background: radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

第一个值左30% 第二个值上50%

2.2.5重复渐变( repeating-radial-gradient)

语法*

background:-webkit-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

background: -moz-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);

background: -o-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

background: repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

2.3 IE6-IE8渐变(用滤镜)

语法

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#0000ff',GradientType=0);

startColorstr 开始颜色

endColorstr 结束颜色

GradientType 渐变类型 ：值(0：线性上下|1：线性左右|2：第二个值到黑色，上下)

标签：CSS3,00f,gradient,背景,渐变,50%,f00,background,linear

来源： https://blog.csdn.net/qq_36519236/article/details/89316892