搜索 收起
您的位置  > 互联网

css中背景相关的7个属性及对应的属性值

chanong 发布于 2024-04-24 06:00:15 阅读()

1：-color 设置背景颜色 2：-image 设置背景图片

- 语法：-image:url(相对路径);

- 可以同时为一个元素指定背景色和背景图片，这样背景色就会作为背景图片的背景色。 一般情况下，在设置背景图片时会同时指定背景颜色。

- 图像在元素中的位置。 如果背景图片比元素大，则默认显示图片的左上角。 如果背景图像与元素大小相同，则将显示整个背景图像。 如果背景图片小于元素大小，则默认显示背景。 平铺图像以填充元素

3:- 重复设置背景图片的方式

可选值：

，默认值，背景图像将在两个方向上重复（平铺）

否-，背景图像不会重复，并且会按原样显示。

-x，背景图像水平重复

-y，背景图像垂直重复

4:-可以调整背景图片在元素中的位置

默认情况下，背景图像显示在元素的左上角。

该属性可以使用右上角左上的两个值来指定背景图像的位置。

可选值：

左上角 左上角

右下右下

如果只给出一个值，则第二个值默认为 ，或者您可以直接指定两个偏移量，

第一个值是水平偏移

- 如果指定正值，图像将向右移动指定的像素

- 如果指定负值，图像将向左移动指定的像素

第二个是垂直偏移

- 如果指定正值，图像将向下移动指定的像素

- 如果指定负值，图像将向上移动指定的像素



	
		<meta charset="UTF-8">
		
		<style type="text/css">
			.box1{
				width: 300px;
				height: 300px;
				margin: 0 auto;
				background-color: #bfa;
				background-image:url('./img/gaitubao_小图_png.png');
				/* background-image:url('./img/中等图jpg.jpg'); */		
		    	background-repeat: no-repeat;
			    background-position: center;
			}
		</style>
	
	<body>

5：-clip设置背景范围

可选值：

-box 默认值，背景色将出现在边框下方

-box背景不会出现在边框中，只出现在内容区域和中

-box背景仅出现在内容区域

6:- 设置背景图像偏移计算的原点，与偏移配合使用

可选值

-box从内部距离开始计数

-box 背景图像的偏移量从内容区域计算

-box 计算距边框的偏移量



  
    <meta charset="UTF-8" />
    
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
 
      .box1 {
        height: 500px;
        width: 500px;
        padding: 20px;
        border: 10px red double;
        margin: 0 auto;
 
        /*设置一个背景颜色*/
        background-color: #bfa;
        /*设置一个背景图片*/
        background-image: url("./img/小图2.webp");
        /*设置一个图片不重复*/
        background-repeat: no-repeat;
        background-position: 100px 0;
        background-origin:content-box;
       
      }
    </style>
  
  <body>

7:-size 设置图像的大小

范围：

第一个值：宽度

第二个值：高度

如果只写一个，第二个值默认为auto。

封面图片比例不变，元素被覆盖

图像比例保持不变，元素完整显示。

8：

- 该属性可用于同时设置所有背景相关的样式

- 没有订单要求，谁先到就可以，没有数量要求。 如果不写样式，将使用默认值。

--size应该写在-之后



  
    <meta charset="UTF-8" />
    
    <style type="text/css">
      .box1 {
        height: 300px;
        width: 300px;
        /*设置一个背景颜色*/
        /*background-color: #bfa;*/
        /*设置一个背景图片*/
        /*background-image: url(img/3.png);*/
        /*设置背景不重复*/
        /*background-repeat: no-repeat;*/
        /*设置背景图片的位置*/
        /*background-position: center center;*/
        /* 设置图片大小 */
        /* background-size: ; */
        /* 设置图片偏移的原点 */
        /* background-origin: padding-box; */
        /*  设置背景的范围 */
        /* background-clip: padding-box; */
        background: #bfa url("./img/小图2.webp") center center/cover no-repeat;
      }
    </style>
  
  <body>

标签:
打赏 点赞( )

相关文章