02_CSS样式之背景参数设置

一、设置背景颜色

  • 设置背景颜色可用参数:

    • **可用参数一: background **
    • **可用参数二:background-color **
    • 注意参数一和参数二 :任意选择一个使用即可
  • 例如:

    <!DOCTYPE>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>背景颜色设置</title>
      <style type="text/css">
        div {
            height: 600px;
            /* 1.设置背景颜色:background 或者 background-color */
            background:red;
            background-color:yellowgreen
        }
      </style>
    </head>
    <body>
         <div>背景设置的使用</div>
    </body>
    </html>
    

二、设置背景图片

  • 把图像设置为背景:

    • 可用参数一: background-image
    • 属性的默认值是 none,表示背景上没有放置任何图像
    • 如果需要设置一个背景图像,必须为这个属性设置一个 URL 值
  • 例如:

    <!-- <!DOCTYPE html -->
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			div {
      				height: 600px;
      				/* 2.设置图像为背景图像:background-image */
      				background-image: url(./600.jpg);
    			}
    		</style>
    	</head>
    	<body>
    		<div>设置背景图片</div>
    	</body>
    </html>
    

三、设置背景平铺

  • 需要在页面上对背景图像进行平铺:

    • **可用参数一:background-repeat **
  • 属性值:

    • 1、repeat:导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样
    • 2、repeat-x: 图像只在水平上重复
    • 3、repeat-y :图像在垂直方向上重复
    • 4、no-repeat :不允许图像在任何方向上平铺
  • 例如:

    <!-- <!DOCTYPE html -->
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			div {
      				height: 600px;
      				background-image: url(./600.jpg);
            
            		/* 3.设置背景平铺:background-repeat*/
              		background-repeat:repeat ;
    			}
    		</style>
    	</head>
    	<body>
    		<div>设置背景平铺</div>
    	</body>
    </html>
    

四、设置背景大小

  • 设置背景大小可用参数:

    • 可用参数一: background-size
  • 属性值:

    • 通过像素指定
      | background-size: 100px 20px |

    • 通过百分比指定
      | background-size: 10% 20% |

    • 原始图片大小
      | background-size: auto |

    • 背景填满容器
      | background-size: cover |

  • 例如:

    <!-- <!DOCTYPE html -->
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			div {
      				height: 600px;
    	      		background-image: url(./600.jpg);
    	      		background-repeat:no-repeat ;   设置平铺显示
            
            		/* 4.设置背景大小:background-size*/
        			background-size: 600px 20px;   通过像素指定
        			background-size: 10%  20%;   通过百分比指定
        			background-size: auto;  原始图片大小
        			background-size: cover;   背景填满容器
    			}
    		</style>
    	</head>
    	<body>
    		<div>设置背景大小</div>
    	</body>
    </html>
    

五、设置背景的显示位置

  • 设置背景的显示位置

    • 可用参数一: background-position
  • 属性值(垂直方向上下)水平方向(左右)):

    • 顶部居中
      | top center |

    • 垂直水平居中
      | center center |

    • 底部居中
      | botton center |

    • 顶部左边
      | top left |

    • 顶部右边
      | top right |

  • 例如:

    <!-- <!DOCTYPE html -->
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			div {
    				height: 600px;
    				background-image: url(./day_16_前端css学习_20220709/600.jpg);
            		background-repeat:no-repeat ;
              		background-size: 600px 300px;
            
      				/* 5.设置背景的显示位置  background-position:  top center*/
              		background-position: center center;
    			}
    		</style>
    	</head>
    	<body>
    		<div>设置背景的显示位置</div>
    	</body>
    </html>
    

六、如何设置背景渐变色

  • 设置背景渐变色

    • 可用参数一:linear-gradient(颜色1,颜色2)
  • 例如:

    <!-- <!DOCTYPE html -->
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			div {
      				height: 600px;
      				background-image: url(./600.jpg);
              background: linear-gradient(#00aa7f, #b0ffbd)
    			}
    		</style>
    	</head>
    	<body>
    		<div>设置背景的显示位置</div>
    	</body>
    </html>