css background 属性

一时失言乱红尘 2022-10-01 05:45 100阅读 0赞

\#css background 属性\#

**标签定义及使用说明**

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：

*  background-color **指定要使用的背景颜色**
 *  background-position **指定背景图像的位置**
 *  background-size **指定背景图片的大小**
 *  background-image **指定要使用的一个或多个背景图像**
 *  background-repeat **指定如何重背景图像**
 *  background-origin **指定背景图像的定位区域**
 *  background-clip **指定背景图像的绘画区域**
 *  background-attachment **设置背景图像是否固定或者随着页面的其余部分滚动**

**实例**

在一个div元素中设置多个背景图像：

<body>
    	<div class="dome"></div>
    </body>
    
    复制代码

css

.dome{
             width: 500px;
             height: 500px;
             margin: 0 auto;
             background: #cccccc url(images/history.jpg) no-repeat ;
             }
    
    复制代码

图为：

\#\#background-position 属性\#\#

**如何定位background-image：**

<body>
    	<div class="dome"></div>
    </body>
    
    复制代码

css：

.dome{
             width: 500px;
             height: 500px;
             margin: 0 auto;
             background: #cccccc url(images/history.jpg) no-repeat ;
    
    		 background-position: 25px 100px;
             }
    
    复制代码

图为：

\#\#标签定义及使用说明\#\#

**background-position属性设置背景图像的起始位置。**

**属性值**

*  left top
 *  left center
 *  left bottom
 *  right top
 *  right center
 *  right bottom
 *  center top
 *  center center
 *  center bottom
 *  x% y% **第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％ 。默认值为：0％0％**

## background-size 属性\#\# ##

**指定背景图像的大小：**

<body>
    	<div class="dome"></div>
    </body>
    
    复制代码

css：

.dome{
             width: 500px;
             height: 500px;
             margin: 0 auto;
             background: #cccccc url(images/history.jpg) no-repeat ;
    
    		 background-position: 50% 50%;
             background-size: 250px 250px;
             }
    
    复制代码

图为：

**标签定义及使用说明**

background-size属性指定背景图片大小。

**语法**

background-size: length|percentage|cover|contain;

*  length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
 *  percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
 *  cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
 *  contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

**如果，您认为阅读这篇博客让你有些收获，请您关注一下。感谢您的支持，如有不足，请多指教。**

**联系方式：**

**微信号：bsl521921**

转载于:https://juejin.im/post/5cd31cfee51d456e5b66ae30