CSS3背景，渐变

﹏ヽ暗。殇╰゛Y 2021-12-20 01:04 545阅读 0赞

1，有利于代码维护，有利于使用debug进行调试打断点。  
2，后面三个都存在计算，所以分开写最好。  
背景复合属性最好的写法，  
background:\#abcdef url() no-repeat 50px 100px scroll;  
background-clip:border-box/padding-box/content-box;  
background-origin:border-box/padding-box/content-box;  
background-size:cover/contain/length/percentage;  
  
background-color:color/rgb/\#000/transparent; 最后一个是透明。  
background-image: url();  背景图片  
background-repeat:  no-repeat/repeat/x-repeat/y-repeat; 背景重复  
background-position: length/%  length/%;  水平位移  垂直位移。此外还有 top center,top right,top left,bottom center,bottom right,bottom left,bottom center,如果只有一个值，left=left center。  
background-attachment: scroll/fixed;  跟随滚动条(默认)  固定。  
background: \#abcdef url() no-repeat 50px 100px scroll;  
  
background-clip: border-box/padding-box/content-box; 背景在哪里开始显示，背景被切到哪里。  
background-origin: border-box/padding-box/content-box;相对于background-position以边框(内边距，内容)盒子左上角顶点为圆点进行位置偏移。  
background-size:contain;  图片遵循等比例缩放，直到整张图片刚刚在整个div中就立马停（图片和div宽高总有一个相等）  
background-size:cover; 图片遵循等比例缩放，直到整张图片刚刚好覆盖整个div就立马停（图片和div宽高总有一个相等）  
background-size: 50%;  默认设置两个值：width:50%;  height:auto;。如只设置一个，默认height:auto;  图片的高等比例缩放，并不等于50%，这里50%是相对父元素div的宽度进行计算。  
background-size有如下值：  
A、length，设置背景图片的高和宽  
  
B、cover，把背景图片扩展至足够大，以使背景图片完全覆盖区域  
  
C、percentage，以父元素的百分比来设置图像的宽度和高度  
  
D、contain，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

A、background-clip指定背景显示的范围  border-box  padding-box  content-box

B、background-size属性指定背景图片的尺寸大小

C、background-origin属性指定背景图片的绘制起点  border-box  padding-box content-box

D、background-position属性是CSS2的，用来定位图片的位置

![967490-20190419102253178-562199286.png][]

![967490-20190419102735913-1419793651.png][]

![967490-20190419102805285-1992771181.png][]

background-clib: border-box;

A、border-box，背景被剪裁到边框盒

B、padding-box，背景被剪裁到内边距框

C、content-box，背景被剪裁到内容框

border：20px solid transparent;   20px的实线边框是透明的。  
            background: url('image/1.jpeg') no-repeat 0px 0px scroll;

background-clip: border-box;    边框，内边距，内容显示背景图 默认值。  
            background-clip: padding-box;   内边距，内容显示背景图，边框不显示。  
            background-clip: content-box;   内容显示内景图，边框和内边距不显示背景图，即内边距是透明的。或者是父元素的背景。

================================

![967490-20190419104810324-861970515.png][]

border：20px solid transparent;   20px的实线边框是透明的。  
            background: url('image/1.jpeg') no-repeat **10px 10px** scroll;

background-clip: border-box;    边框，内边距，内容显示背景图 **默认值**。  
            background-clip: padding-box;   内边距，内容显示背景图，边框不显示。  
            background-clip: content-box;   内容显示内景图，边框和内边距不显示背景图，即内边距是透明的。或者是父元素的背景。

**上面图片background-postion:10px 10px; 水平和垂直位移相对于边框盒子，内边距盒子，内容盒子进行定位的：**  
            background-origin: border-box;    图片相对于边框盒子进行定位  
            background-origin: padding-box;  图片相对于内边距盒子进行定位  
            background-origin: content-box;  图片相对于内容盒子进行定位

-------------------

background-size:**contain**;  **图片遵循等比例缩放，直到整张图片刚刚在整个div中就立马停（图片和div宽高总有一个相等）**，不是width留白，就是height高留白，也可能刚刚好覆盖，而不留白。如果图片很小，那么图片的宽会放大到和div的宽一样大，或者是放大图片的高等于div的高。

background-size:**cover**; **图片遵循等比例缩放，直到整张图片刚刚好覆盖整个div就立马停（图片和div宽高总有一个相等）**，不留白。不是width溢出，就是height溢出。不过也可能存在刚刚好覆盖整个div不溢出。不是图片的宽等于div的宽，就是图片的高等于div的高。图片基本上都存在溢出，但是也可能刚刚整张图片通过缩放刚刚好覆盖整个div。

background-size: 50%;  默认设置两个值：width  height。如只设置一个，默认height:auto;  图片的高等比例缩放，并不等于50%，这里50%是相对复原度div的宽度进行计算。

background-size: 50% 50%;  这里的百分比是相对父元素div的 width 和 height 而言的。跟上面一个不相等。

background-size:100%; 等于background-size:100% auto; 这里的100%是相对父元素div本身宽度而设定的，即等于图片原始宽度。高度也等于原始高度。

当只设置width一个值时，height的值为：auto。根据宽度等比例缩放，确保不变形。

background-size: 600px; 等于：background-size:600px auto; 这里图片的高度是根据图片大小等比例缩放的。

A、length，设置背景图片的高和宽

B、cover，把背景图片扩展至足够大，以使背景图片完全覆盖区域

***C、percentage，以父元素的百分比来设置图像的宽度和高度***

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

![967490-20190419102329291-522698690.png][]

\----------------------------------

![967490-20190419102336488-1998001291.png][]

多张背景图片一般是使用多张png图片在前，其他图片在后，多张图片重合形成一个更好看的效果图。

background-image: url("image/1.gif"),url('image/1.jpeg');  **前面**一张图片会**覆盖后面**一张图片

"image/1.gif"  小图

image/1.jpeg    大图

如下图：

![967490-20190421173943328-1812955134.png][]

=============================================

![967490-20190419102341863-444849060.png][]

![967490-20190419102347566-486518956.png][]

![967490-20190419102354180-177757313.png][]

![967490-20190419102400054-1405045034.png][]

![967490-20190419102406007-719942965.png][]

background: -webkit-linear-gradient(\#ff0,\#f0f,\#fff,pink);  
            background:    -moz-linear-gradient(\#ff0,\#f0f,\#fff,pink);  
            background:      -o-linear-gradient(\#ff0,\#f0f,\#fff,pink);  
            background:         linear-gradient(\#ff0,\#f0f,\#fff,pink);

![967490-20190419102416628-1420675136.png][]

从左到右渐变，左是开始 ， 右是结束。

begin  表示写开始  ，从左到右，在-webkit-内核中写 left.

end  表示写结束， 从左到右，在-moz-内核中写 right.

to end，从左到右，所以标准写法应该是 to right.   这是标准写法。

\-----如下从左到右渐变-------

background: -webkit-linear-gradient(**left**,\#ff0,\#f0f,\#fff,pink);  
            background:    -moz-linear-gradient(**right**,\#ff0,\#f0f,\#fff,pink);  
            background:      -o-linear-gradient(**right**,\#ff0,\#f0f,\#fff,pink);  
            background:         linear-gradient(**to right**,\#ff0,\#f0f,\#fff,pink);

![967490-20190419102423323-1780507227.png][]

begin-level  开始水平线   begin-vertical 开始垂直线  即：两线交点就是渐变起点。（适用 -webkit- 内核浏览器）

end-level 结束水平线   begin-vertical  结束垂直线  即：两线交点就是渐变终点（使用 -moz- 和 -o- 内核浏览器）

to end-level  end-vertical  结束点（水平线和垂直线交点） 这是标准写法。

\---------

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
        \*\{  
            padding: 0;  
            margin: 0;  
            margin: 0 auto;  
        \}  
        .container\{  
            width: 800px;  
            margin: 0 auto;  
            text-align: center;  
        \}  
        .container>div\{  
            width: 200px;  
            height: 200px;  
            /\* background: \#ff0; \*/  
        \}  
        .one\{  
            float: left;  
        \}  
        .two\{  
            margin: 0 auto;  
            display: inline-block;  
        \}  
        .three\{  
            float: right;  
        \}  
        .one\{  
            /\*上到下渐变。默认从上到下，所以不用写方向。直接写颜色即可\*/  
            background:   -webkit-linear-gradient(red,yellow,\#00f,blue,orange);  
            background:      -moz-linear-gradient(red,yellow,\#00f,blue,orange);  
            background:        -o-linear-gradient(red,yellow,\#00f,blue,orange);  
            background:           linear-gradient(red,yellow,\#00f,blue,orange);  
        \}  
        .two\{  
            /\*左到右渐变。只有webkit浏览器是写开始begin，其他都是写结束end，标准：to end\*/  
            /\*begin/end-direction 开始/结束方向  
              webkit 写 begin-direction  
              moz 和 o 浏览器都是写 end-direction  
              标准写法 to end-direction  
            \*/  
            background: -webkit-linear-gradient(left,red,yellow,\#00f,blue,orange);  
            background:    -moz-linear-gradient(right,red,yellow,\#00f,blue,orange);  
            background:      -o-linear-gradient(right,red,yellow,\#00f,blue,orange);  
            background:         linear-gradient(to right,red,yellow,\#00f,blue,orange);  
        \}  
        .three\{  
            /\*左上角到右下角渐变\*/  
            /\*begin/end-level 起始/结束点  
              webkit 写 begin-level 起始点  
              moz 和 o 浏览器都是写 end-level 结束点  
              标准写法 to end-level  结束点  
            \*/  
            background: -webkit-linear-gradient(top left,red,yellow,\#00f,blue,orange);  
            background:    -moz-linear-gradient(bottom right,red,yellow,\#00f,blue,orange);  
            background:      -o-linear-gradient(bottom right,red,yellow,\#00f,blue,orange);  
            background:         linear-gradient(to bottom right,red,yellow,\#00f,blue,orange);  
        \}  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div class="one">1</div>  
        <div class="two">2</div>  
        <div class="three">3</div>  
    </div>  
</body>  
</html>

=================以上是线性渐变实例，上到下，左到右，左上角到右下角======================

============================================================================

** 角度确定：十字架，上是0deg，顺时针右90deg，下是180deg，左是270deg。**  
background: linear-gradient(111deg,red,yellow 20%,blue 50%,orange 85%,blue 8%);  
/\*第一个不写百分比值：默认0%，最后一个不写百分比值：默认100%，如果orange 百分比 小于等于 blue 百分比，渐变线85%之后全部蓝色。如果最后一个blue 百分比 小于 100% 那么 blue 百分比之后的全部都是纯blue，没有渐变,如果语法错误，则恢复默认从上到下渐变。使用角度写渐变不存在兼容性，所以可以**使用这个代替所有线性渐变**。\*/

background: linear-gradient(111deg,**rgba**(255, 0, 0, 0),**rgba**(255,0,0,.3) 20%,**rgba**(255, 0, 0, 1) 80%);  
/\***Alpha透明度,取值0~1之间**。其他语法一毛一样\*/

![967490-20190419102431576-1246718887.png][]

![967490-20190419102437850-335520698.png][]

===========================

background:         repeating\-linear-gradient(90deg,red,yellow,blue);

重复渐变只在属性前增加了：repeating。其他一毛一样。

![967490-20190419102444421-1233763982.png][]

==============================================================

![967490-20190422101802350-1329342974.png][]

**-webkit-**内核浏览器使用角度渐变的规则：如图上图：X轴，Y轴

1，以**X轴正半轴**为起始点，**逆时针**旋转，度数变大。

**-moz-,-ms-,-o-**内核浏览器使用角度渐变的规则：如图下图：X轴，Y轴

1，以**Y轴正半轴**为起始点，顺时针旋转，度数变大。

在写代码时，一定要把带-webkit-内核的浏览器样式写在前面如下：

background: **-webkit-**linear-gradient(top left,red,yellow,\#00f,blue,orange);  
            background:    **-moz-**linear-gradient(bottom right,red,yellow,\#00f,blue,orange);  
            background:      **-o-**linear-gradient(bottom right,red,yellow,\#00f,blue,orange);  
            background:         linear-gradient(to bottom right,red,yellow,\#00f,blue,orange);

![967490-20190422101813688-1777384996.png][]

==============================================================

**好看的重复渐变**：只添加了一个repeating，其他一毛一样。

\-webkit-background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

-moz-background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

-ms-background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

-o-background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

\-webkit-background:         repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);  
   -moz-background:         repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);  
    -ms-background:         repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);  
     -o-background:         repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);

=================

.two\{  
            /\*默认径向渐变\*/  
            width: 300px;/\*width != height时，circle圆形，ellipse椭圆\*/  
            height: 600px;  
            margin: 0 auto;  
            margin-top: 100px;  
            /\*默认div中心就是圆心，默认径向渐变图形为椭圆ellipse\*/  
            background: -webkit-radial-gradient(red 20%,green 50%,blue 80%);  
            background:    -moz-radial-gradient(red 20%,green 50%,blue 80%);  
            background:     -ms-radial-gradient(red 20%,green 50%,blue 80%);  
            background:      -o-radial-gradient(red 20%,green 50%,blue 80%);  
            background:        -radial-gradient(red 20%,green 50%,blue 80%);  
        \}  
        .one\{  
            width: 300px;/\*width=height\*/  
            height: 300px;  
            margin: 0 auto;  
            margin-top: 100px;  
            /\*width=height时，决定了是circle渐变，所以下面设置成ellipse都是没用的。\*/  
            background: -webkit-radial-gradient(ellipse,red 20%,green 50%,blue 80%);  
            background:    -moz-radial-gradient(ellipse,red 20%,green 50%,blue 80%);  
            background:     -ms-radial-gradient(ellipse,red 20%,green 50%,blue 80%);  
            background:      -o-radial-gradient(ellipse,red 20%,green 50%,blue 80%);  
            background:        -radial-gradient(ellipse,red 20%,green 50%,blue 80%);  
        \}  
        .main\{  
            width: 300px;  
            height: 500px;  
            margin: 0 auto;  
            margin-top: 100px;  
            /\*完整径向渐变属性如下：  
              20% 40%  设置圆心。  
              closest-side  ellipse/circle     设置半径为：距离圆心最近的边,进行椭圆/正圆渐变。  
              closest-corner  ellipse/circle   设置半径为：距离圆心最近的角,进行椭圆/正圆渐变。  
              farthest-side  ellipse/circle   设置半径为：距离圆心最远的边,进行椭圆/正圆渐变。  
              farthest-conrner ellipse/circle  设置半径为：距离圆心最远的角,进行椭圆/正圆渐变。  
              渐变形状两个值：  
              circle   圆形  
              ellipse  椭圆  
  
            \*/  
            background: -webkit-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);  
            background:    -moz-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);  
            background:     -ms-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);  
            background:      -o-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);  
            background:        -radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);  
        \}  
        .three\{  
            width: 300px;  
            height: 500px;  
            margin: 0 auto;  
            margin-top: 100px;  
            /\*重复径向渐变：repeating-radia-gradient\*/  
            background: -webkit-repeating-radial-gradient(red 10%,green 20%);  
            background:    -moz-repeating-radial-gradient(red 10%,green 20%);  
            background:     -ms-repeating-radial-gradient(red 10%,green 20%);  
            background:      -o-repeating-radial-gradient(red 10%,green 20%);  
            background:        -repeating-radial-gradient(red 10%,green 20%);  
        \}

![967490-20190419102450168-64141403.png][]

![967490-20190419102455993-1492740648.png][]

![967490-20190419102501843-314030684.png][]

![967490-20190422110711247-159804351.png][]

![967490-20190419102514512-1198988452.png][]

![967490-20190419102520137-346502832.png][]

HTML背景透明  
opacity:0.5;/\*这样设置背景颜色为透明，那么里面的字体也会变成半透明\*/  
  
background:rgba(255,255,255,0.2);/\*这样只设置背景颜色，里面内容不是透明\*/  
background: transparent; 背景透明，且文字不透明  
  
filter:Alpha(opacity=50);/\* 只支持IE6、7、8、9 \*/  
position:static; /\* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 \*/  
zoom:1; /\* 激活IE6、7的haslayout属性，让它读懂Alpha \*/

\-webkit-  
   -moz-  
    -ms-  
     -o-

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10734765.html

[967490-20190419102253178-562199286.png]: /images/20211220/d90892cce96a48e39e7ad7b3ba864c7d.png
[967490-20190419102735913-1419793651.png]: /images/20211220/d5991d44f49944a990b8aaa0d1d57577.png
[967490-20190419102805285-1992771181.png]: /images/20211220/8ac5d0ffad6145f09191be59d2710c25.png
[967490-20190419104810324-861970515.png]: /images/20211220/d53bda2c923544f0a3abbd39b9362a0c.png
[967490-20190419102329291-522698690.png]: /images/20211220/3f562e3ee9f742b19b09d466b0762739.png
[967490-20190419102336488-1998001291.png]: /images/20211220/75d8b937b56d4cacb87907a0ff72363a.png
[967490-20190421173943328-1812955134.png]: /images/20211220/ae47b2762b4641f2b9654049931d2c25.png
[967490-20190419102341863-444849060.png]: /images/20211220/648be6966d694d86b9c4d9ab4e7950e2.png
[967490-20190419102347566-486518956.png]: /images/20211220/732a3af3481a4c6bb4ba13f8ab6bcc70.png
[967490-20190419102354180-177757313.png]: /images/20211220/72e7388d42c54c36ae7dc3fea0a72f0d.png
[967490-20190419102400054-1405045034.png]: /images/20211220/b451f1f34967450e81fa7974c786c530.png
[967490-20190419102406007-719942965.png]: /images/20211220/d8470eac243647e295ceeda00dde0654.png
[967490-20190419102416628-1420675136.png]: /images/20211220/d2cb9d2088404f88bb9cda0b0df30144.png
[967490-20190419102423323-1780507227.png]: /images/20211220/fd2ef057eda945fb8d84451b94244c46.png
[967490-20190419102431576-1246718887.png]: /images/20211220/d788045155dc4600ae6a7b04a9739519.png
[967490-20190419102437850-335520698.png]: /images/20211220/75d8091e92a8413f8a68f47f1425bfba.png
[967490-20190419102444421-1233763982.png]: /images/20211220/0af3b11b82194f11b61e7bf38851e0a0.png
[967490-20190422101802350-1329342974.png]: /images/20211220/f5de33e18b6042febfb3447e9ebdc982.png
[967490-20190422101813688-1777384996.png]: /images/20211220/eb1981cd71ca4e5eab3db7aaaf1894aa.png
[967490-20190419102450168-64141403.png]: /images/20211220/ba7c09abd5734a799730cc0f279af166.png
[967490-20190419102455993-1492740648.png]: /images/20211220/105ab166043642a79901a28712f377f8.png
[967490-20190419102501843-314030684.png]: /images/20211220/46d5a0b36b604f6abca782bdc210d555.png
[967490-20190422110711247-159804351.png]: /images/20211220/f03cb967ed6b40ab80c694aaef04cd6d.png
[967490-20190419102514512-1198988452.png]: /images/20211220/e65ff2d6719241ed8b06e5400b8b4401.png
[967490-20190419102520137-346502832.png]: /images/20211220/92cd2c6d90464fc899a3db0430e2f5b0.png