前端 HTML/CSS （十三）

叁歲伎倆 2023-01-03 04:20 181阅读 0赞

### 目录 ###

*   *   *  前端 HTML/CSS （十三）
         *   *  background-origin，背景定位基准
             *  background-clip:
             *  background-size，调整背景图像的尺寸
             *  背景粘附（css2）
             *  简写属性
             *  滤镜
             *  opacity和rgba
         *  渐变

### 前端 HTML/CSS （十三） ###

#### background-origin，背景定位基准 ####

背景裁剪用来控制背景延伸到哪里，`background-origin`用来控制`background-position`相对于哪里来进行定位。

默认的时候`background-position`定位相对于元素内边距的外边界来进行定位。

*  `padding-box`，默认值。背景图像的左上角被放在内边距外边界（左上角）。
 *  `border-box`，背景的图像左上角被放在边框的外边界（左上角）。
 *  `content-box`，背景的图像左上角被放在内容区域的外边界（左上角）。

`background-clip`和`background-origin`他们取值相同。 `background-origin`用来定义从哪里开始、`background-position`以哪里进行定位。`background-clip`，用来定义背景平铺时延伸到哪里。

> background-position: top center; 让大背景图片尽量靠上居中，使其适应于不同的分辨率屏幕的显示。

#### background-clip: ####

1.  background-clip: padding-box;

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta name="keywords" content="zidingyi">
            <meta name="description" content="zidingyi">
            <meta charset="UTF-8">
            <title></title>
            <style> div { width: 400px; height: 460px; border: 10px dotted red; padding: 10px; background-image: url(./img/杨幂.png); background-clip: content-box; } </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]  
2. background-clip: border-box

代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta name="keywords" content="zidingyi">
            <meta name="description" content="zidingyi">
            <meta charset="UTF-8">
            <title></title>
            <style> div { width: 400px; height: 460px; border: 10px dotted red; padding: 10px; background-image: url(./img/杨幂.png); background-clip: border-box; } </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]  
3. background-clip: content-box

代码：

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]

#### background-size，调整背景图像的尺寸 ####

提供两个值第一个是横向尺寸、第二个是纵向尺寸。

`background-size:`

*  px，像素。
 *  em，文本大小。
 *  %，按照元素的宽度、高度进行计算（包括了内边距）
 *  cover，等比例缩放完全覆盖容器，但是背景图像有可能在等比例缩放完成之后超出容器。
 *  contain，将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内（不会有超出的地方）。

`background-size:cover`

代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta name="keywords" content="zidingyi">
            <meta name="description" content="zidingyi">
            <meta charset="UTF-8">
            <title></title>
            <style> div { width: 400px; height: 460px; border: 10px dotted red; padding: 10px; background-image: url(./img/杨幂.png); background-size: cover; } </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]  
`background-size: contain;`

代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta name="keywords" content="zidingyi">
            <meta name="description" content="zidingyi">
            <meta charset="UTF-8">
            <title></title>
            <style> div { width: 400px; height: 460px; border: 10px dotted red; padding: 10px; background-image: url(./img/杨幂.png); background-repeat: no-repeat; background-size: contain; } </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]

#### 背景粘附（css2） ####

`background-attachment`：

*  scroll，默认值，背景图相对于元素自身固定，并且不随着它的内容滚动。
    
    在body上设置background-attachment: scroll是一种例外，背景会随着内容的滚动而滚动。
 *  fixed，背景图相对于视口固定，这就导致页面滚动背景不滚动。
 *  local，背景相对于元素的内容固定。如果有滚动条时，背景将会随着元素的内容的滚动而滚动。

`[VNote](https://tamlok.github.io/vnote/) 是一个受Vim启发的更懂程序员和Markdown的一个笔记软件。`

> background-attachment: fixed; 相对于视口进行固定，浏览器的滚动条滚动时它不会动，内容区的滚动条滚动时，它仍然不会动。

> 排错：在写页面时，如果下面一行的内容过不去，需要查看上面的内容是否超出所导致下面的代码过不去。

#### 简写属性 ####

格式：`background: image position/size repeat attachment origin clip color`

注意：

1.  background可以设置多个不同的背景，每个背景之间使用逗号分隔。
2.  多张背景图时先写的放在上面，后写的放在下面。

> background连写中，position/size 如果两个值连写，位置不能换，并且中间要有斜线（斜线不能省略）。

#### 滤镜 ####

滤镜：用来实现图像的各种特殊效果。

格式：`filter: value`一般使用在图像上。

*  `blur()`，控制模糊度。默认为0，可以增加px来实现模糊。
 *  `grayscale()`，控制元素灰度，为0时没有变化，为1时变成灰度图像。
 *  `opacity()`，透明度，0表示完全透明，1不透明。
 *  `sepia()`，调整元素的红褐色，0时没有变化，1时元素变成红褐色。
 *  `invert()`，将元素的所有颜色反向处理。0时没有变化1时完全反转。（显示效果像照片的底片）
    
    255减去r、g、b的值。
 *  `brightness()`，调整元素上颜色的亮度，为0时为纯黑，大于1将会比原有的颜色更亮。为1的时候没有变化。
 *  `contrast()`，调整元素上颜色的对比度，对比度越高，越容易区分出来颜色。对比度越小，颜色越相近。值为0时变为纯灰色，值为1时没有变化，大于1时颜色比原有的元素的对比度要打。
 *  `filter:saturate()`，用来调整元素的饱和度。饱和度越高，颜色越鲜艳，饱和度越低颜色越暗淡。值为0时没有饱和度，得到的是灰色图片。为1时没变化。

注意：filter的value的值可以有多个方法，他们之间以空格进行分隔。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style> img{ filter:blur(5px) grayscale(1); /* filter:grayscale(0.5); */ /* filter:opacity(0.1); */ /* filter:sepia(1); */ /* filter:invert(1); */ /* filter:brightness(0); */ /* filter:contrast(10); */ /* filter:saturate(18) */; } </style>
        </head>
        <body>
            <img src="./img/big103015.png" />
        </body>
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]

#### opacity和rgba ####

`opacity` 属性值0~1，0为全透，1为完全不透明。

*  `filter: opacity`，用在图片上，因为`filter`可以有多个效果。
 *  `opacity` 属性一般用在动画上，用来做整体的淡入淡出。
 *  `rgba`背景透明，但是里面的内容不透明。经常用来做遮罩图层。

### 渐变 ###

渐变指的是从一个颜色到另外一个颜色的平滑过渡，是图像。**渐变最大的特点就是没有固定尺寸。**

渐变分为`线性渐变`和`径向渐变`，线性渐变和径向渐变又分为`循环渐变`和`不循环渐变`。

> 渐变一般用于background-image里面。

`background-image`

*  线性渐变
    
    线性渐变指的是沿着\_\_一条线\_\_进行填充得到的渐变（这条线是贯穿元素中心点的一条线，通常称为梯度线）。
    
    `linear-gradient:[方向/角度] color1 color2 .....`
    
    1.  简单的颜色值，可以使用任何CSS中的任何类型的颜色，包括rgba和transparent，颜色可以有两个或多个。如果有多个颜色则默认平均分配在梯度线上。
    2.  角度  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 6]  
        假设背景图像是`矩形`那在外面浏览器会虚拟出一个圆形来，既然是原型那么就有角度了，顺时针为0180，逆时针为0\-180。

1.  梯度线的颜色的分配
    
    梯度线在分配颜色时是在90度的地方发散出来了很多的虚拟的线条来进行无线的延伸。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 7]  
4. 方向

*  to bottom 默认值，梯度线方向向下。
 *  to top ，向上
 *  to left， 向左
 *  to right，向右
 *  to left top 左上角
 *  to left bottom 左下角
 *  to right top 右上角
 *  to right bottom 右下角

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 8]

*  经过图像的中心点把声明的角的相邻的两侧的角度连接起来。
 *  梯度线与那条相邻角的对角线垂直，指向声明的角。

1.  颜色值的默认设置
    
    默认的时候如果有多个颜色平均分配在梯度线上（第一个颜色在0%的位置，最后一个颜色在100%的位置）
    
    `background-image: linear-gradient(to right, yellow, blue, green);`
    
    yellow在0%位置，蓝色在50%位置，绿色在100%位置。
    
    `background-image: linear-gradient(to right, red, yellow, blue, green);`
    
    red在0%，yellow在33.3%，blue在66.6%，green在100%。
2.  指定颜色值的位置。
    
    可以指定px或%单位也就是在指定的颜色后面插入一个值（位置值），让这些插入的颜色不平均在梯度线上进行分配。
    
    `background-image: linear-gradient(to right, yellow 0%, red 10%, green 30%, blue 50%);`

![在这里插入图片描述][20210107111740918.png]  
梯度线方向：从左到右。

如果排布的颜色不到梯度线的末端就会将最后一个颜色延伸下去。

**急停效果，不渐变。**

*  重复性线性渐变
    
    `repeating-linear-gradient`，重复性线性渐变在梯度线上不断的循环排布声明的颜色，最后一个颜色的长度用于定义图案的整体长度超过该长度之后就循环。
 *  径向渐变
    
    沿着一个中心点向四周扩展颜色进行平滑过渡。
    
    `radial-gradient:[大小][at point] color1 color2`
    
    1.  简单的颜色
        
        可以使用任何类型的颜色包括`transparent`，颜色可以有两个或多个。如果有多个颜色也是默认平均分配在梯度线上。
        
        默认的时候径向渐变在中间显示。在正方形元素中径向渐变显示为圆形，矩形元素中径向渐变为椭圆形。
    2.  梯度线
        
        梯度线，从渐变的中心向右延伸，渐变的其他部分根据着这个线创建。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 9]  
3. 默认时，如果有多个颜色则默认平均分配在梯度线上（颜色和颜色之间尽量平滑），可以给颜色值指定一个位置，让他不平均分配。

`background-image: radial-gradient(yellow,red 20px,green 100%);`，在梯度线0%的位置放置黄色，梯度线 20px 的地方放置红色（黄色和红色之间平滑过渡），在梯度线100%的位置放置绿色（红色和绿色平滑过渡）

1.  大小
    
    径向渐变中，径向形状的尺寸可以设置。
    
    大小：一个值或两个值。
    
    一个值的话得到的是圆形渐变，它的值为半径。
    
    两个值，得到的是椭圆的渐变，第一个值为宽度的一半，第二个值为高度的一半。
2.  at point，默认时径向渐变的中心在元素的中心，可以使用at point来进行更改。 point的值和background-position的值是相同的。

重复性径向渐变

`repeating-radial-gradient`，定义好圆形或椭圆形尺寸之后再使用长度定义颜色在梯度线上的位置，超出超出梯度线的末端之后，就可以循环了。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> div { width: 200px; height: 200px; background-image: repeating-radial-gradient(yellow, blue); } </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

显示：  
![在这里插入图片描述][20210107111922420.png]  
上面的代码不会循环渐变，因为使用的默认值，径向渐变在中心点开始扩散到元素四周，你必须限制径向渐变的尺寸，超出这个尺寸之后才会开始重复。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221119/dc5bfceab3b443899ef629446f447b6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]: /images/20221119/321bfcf1fbc047c1a7d5cca35ac80c7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]: /images/20221119/8ac93c57146247b8ad913038c33a2b36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]: /images/20221119/6e713a8c56b34c2db092619471cb3402.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]: /images/20221119/f578dd90d22b4ebf8fdb8346c0175481.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]: /images/20221119/18712a9d698c401482341220aae83821.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 6]: /images/20221119/a3ed8d1e1305493f85964b179c2c0b10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 7]: /images/20221119/6294b336a2074a838c634671d8d42fd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 8]: /images/20221119/b1f8dd9ce0b5442fab24da5d8fa68822.png
[20210107111740918.png]: /images/20221119/bcd3ac165d904d89a7c6e966a54920ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 9]: /images/20221119/dc4f7b0a07ac4d0eb6359acf6b99c2c2.png
[20210107111922420.png]: /images/20221119/5e469798529048c4be9822eed4db5d7b.png