html基础之背景属性

水深无声 2023-06-04 14:57 3阅读 0赞

今天突发奇想，复习一下css相关属性，并做一下笔记，因为是复习就不详细介绍，只是以例子简单介绍一下用法

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background</td> 
   <td>在一个声明中设置所有的背景属性。</td> 
  </tr> 
  <tr> 
   <td>background-attachment</td> 
   <td>设置背景图像是否固定或者随着页面的其余部分滚动。</td> 
  </tr> 
  <tr> 
   <td>background-color</td> 
   <td>设置元素的背景颜色。</td> 
  </tr> 
  <tr> 
   <td>background-image</td> 
   <td>设置元素的背景图像。</td> 
  </tr> 
  <tr> 
   <td>background-position</td> 
   <td>设置背景图像的开始位置。</td> 
  </tr> 
  <tr> 
   <td>background-repeat</td> 
   <td>设置是否及如何重复背景图像。</td> 
  </tr> 
  <tr> 
   <td>background-clip</td> 
   <td>规定背景的绘制区域。</td> 
  </tr> 
  <tr> 
   <td>background-origin</td> 
   <td>规定背景图片的定位区域。</td> 
  </tr> 
  <tr> 
   <td>background-size</td> 
   <td>规定背景图片的尺寸。</td> 
  </tr> 
 </tbody> 
</table>

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color  
background-position  
background-size  
background-repeat  
background-origin  
background-clip  
background-attachment  
background-image

### background-color 规定要使用的背景颜色。 ###

div { background-color: yellow;}
    	h1 { background-color: #00ff00;}
    	p { background-color: rgb(255, 0, 255);}

![20191008085650206.PNG][]

#### 书写颜色的几种方案 ####

书写颜色的方法有几种，其中有比较常见的就是，直接书写的颜色（`red`）。 规定颜色值为十六进制值的背景颜色（比如 `#ff0000`）。规定颜色值为 rgb 代码的背景颜色（比如`rgb(255,0,0)`）。  
当然了还有一个可以直接设置透明度的`p {background-color: rgba(255, 0, 255,0.1);}` ；即最后一个参数范围0-1，代表着透明度，其他的都容易理解，这里简单介绍一下十六进制颜色和rgb（）颜色，因为我不怎么会写

以`#FFFFOO`为例。从\#后第1位开始每2位为一组,表示一个颜色的值（这是以十六进制来算的）  
第1组为红色，第2组为绿色，第3组为蓝色  
根据三基色的原理，红色与绿色混合为黄色，红色与蓝色混为紫色，绿色与蓝色混合为青色。 来看看这些基本色的颜色代码：  
红色\#FF0000，绿色\#00ff00，蓝色为\#0000ff，  
黄色为\#FFFFOO，紫色为\#ff00ff,青色为\#00ffff,白色\#ffffff,黑色\#000000（上面所提到的都是饱和色）  
不知道你有没有这种经验，就是当所有的数值都相等的时候只有三种状态，黑白灰，数值越大，颜色越亮。于是当看到一些颜色代码的时候可以这么分析 举个例子啊：  
比如颜色代码\#ff9966,从这个代码中我们可以每个位上都减去6,于是便剩下\#993300，然后可以分析出这种颜色偏向黄的红色，而且颜色较淡，有些灰，前面每位减去6了，具体颜色名称要具体分析

同样的，rgb（）颜色有着相同的特性；  
RGB 分别代表 red green blue

000000 表示什么颜色都没有，黑色  
FF0000 红色，00FF00 绿色，0000FF 蓝色

就从单色来看，这个值越大这个颜色越亮（越红），这个值越小则越暗（越黑）。以下是笔者用axure画的红色色谱。

### background-position 规定背景图像的位置。 ###

取值很简单，直接从别处截图  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70][]

很明显，三种取值方式，不同的位置有不同的取值方法，如下所示

div { 
    			background: url(img/demo.png) no-repeat;
    			
    			background-position: center center;
    			/* background-position: 50px 50px; */
    			/* background-position: 50% 50%; */
    			
    			background-size: 150px 100px;
    			width: 250px;
    			height: 200px;
    			border: 1px solid red;
    			}

不过在使用百分比時时需要注意，这里的移动点是图片的终点，简单的说就是`background-position: 50% 50%;`时，图片会居中，并不是和其他的一样，以x，y轴坐标为标准。所以在设置图片居中时候这是个比较好的方法，以上的三种测试都是如下图

![在这里插入图片描述][20191008092944858.png]

### background-size 规定背景图片的尺寸。 ###

代码示例即使所对应的图片如下

/* background-size: 125px 200px; */
    				/* background-size: 125px ; */
    
    				/* background-size: 50% 100%; */
    				/* background-size: 50% ; */
    
    				/* 如果只设置一个值，则第二个值会被设置为 "auto"。 */
    
    				/* background-size: contain; */
    				/* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 */
    				background-size: cover;
    				/* 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 */

![20191008101545939.PNG][] ![20191008101808989.PNG][] ![20191008101827709.PNG][] ![20191008101909949.PNG][] ![2019100810192729.PNG][] ![20191008101948343.PNG][]

### background-repeat 规定如何重复背景图像。 ###

没什么说的，即如何平铺背景，还有一些不常用的直接截图属性值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>repeat</td> 
   <td>默认。背景图像将在垂直方向和水平方向重复。</td> 
  </tr> 
  <tr> 
   <td>repeat-x</td> 
   <td>背景图像将在水平方向重复。</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>背景图像将在垂直方向重复。</td> 
  </tr> 
  <tr> 
   <td>no-repeat</td> 
   <td>背景图像将仅显示一次。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 background-repeat 属性的设置。</td> 
  </tr> 
 </tbody> 
</table>

### background-origin 规定背景图片的定位区域。 ###

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>padding-box</td> 
   <td>背景图像相对于内边距框来定位。 测试</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>背景图像相对于边框盒来定位。 测试</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景图像相对于内容框来定位。</td> 
  </tr> 
 </tbody> 
</table>

### background-clip 规定背景的绘制区域。 ###

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>背景被裁剪到边框盒。</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>背景被裁剪到内边距框。</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景被裁剪到内容框。</td> 
  </tr> 
 </tbody> 
</table>

### background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 ###

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scroll</td> 
   <td>默认值。背景图像会随着页面其余部分的滚动而移动。</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>当页面的其余部分滚动时，背景图像不会移动。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 background-attachment 属性的设置。</td> 
  </tr> 
 </tbody> 
</table>

### background-image 规定要使用的背景图像。 ###

详细内容 https://www.w3school.com.cn/cssref/pr\_background.asp

[20191008085650206.PNG]: /images/20230601/4cbaf8c9eed64cf8ace0a437a2e2d891.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20230601/534a972bcf064f4787270d762f549809.png
[20191008092944858.png]: /images/20230601/6f9002674cb54311973a7a0794e6db16.png
[20191008101545939.PNG]: https://img-blog.csdnimg.cn/20191008101545939.PNG
[20191008101808989.PNG]: https://img-blog.csdnimg.cn/20191008101808989.PNG
[20191008101827709.PNG]: https://img-blog.csdnimg.cn/20191008101827709.PNG
[20191008101909949.PNG]: https://img-blog.csdnimg.cn/20191008101909949.PNG
[2019100810192729.PNG]: https://img-blog.csdnimg.cn/2019100810192729.PNG
[20191008101948343.PNG]: /images/20230601/cb10ca47ad6a499cb2ffa53fd51eb5ff.png