css学习之background

ゞ浴缸里的玫瑰 2022-09-04 03:51 155阅读 0赞

background属性

例子：对body的背景进行设置

body
      { 
      background: #00FF00 url(bgimage.gif) no-repeat fixed top;
      }

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

可以设置如下背景属性：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>background-color</td> 
   <td>规定要使用的背景颜色。</td> 
  </tr> 
  <tr> 
   <td>background-position</td> 
   <td>规定背景图像的位置。</td> 
  </tr> 
  <tr> 
   <td>background-size</td> 
   <td>规定背景图片的尺寸。</td> 
  </tr> 
  <tr> 
   <td>background-repeat</td> 
   <td>规定如何重复背景图像。</td> 
  </tr> 
  <tr> 
   <td> <p>background-origin</p> </td> 
   <td>规定背景图片的定位区域。</td> 
  </tr> 
  <tr> 
   <td>background-clip</td> 
   <td>规定背景的绘制区域。</td> 
  </tr> 
  <tr> 
   <td>background-attachment</td> 
   <td>规定背景图像是否固定或者随着页面滚动。</td> 
  </tr> 
  <tr> 
   <td>background-image</td> 
   <td>规定要使用的背景图像</td> 
  </tr> 
 </tbody> 
</table>

简单举例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>背景</title>
        <style>
            body {
                /* background: #ccc; */
                /* 背景为图片，可以加入与图片主色调相一致的颜色作为背景颜色，背景颜色在背景图片的底层 */
                /* background-image: url('../../img/zhihu.png'); */
                /* background-color: rgba(44, 38, 38, 0.192) */
                /* 渐变色 */
                /* background-color: linear-gradient(red, blue); */
                /* x轴  y轴 */
                background-position: 200px 100px;
            }
            
            body>div {
                width: 300px;
                height: 300px;
                margin: 20px;
                padding: 20px;
                border: 2px solid red;
                background-image: url('../../img/zhihu.png');
                background-attachment: fixed;
                background-repeat: no-repeat;
            }
            
            body>div:nth-child(1) {
                /*背景图片的宽高*/
                background-size: 200px 100px;
                /*不重复*，只保持一张*/
                background-repeat: no-repeat;
            }
            
            body>div:nth-child(2) {
                width: 10px;
                height: 500px;
                /* background-size: 80%; */
                /* background-size: contain;按图片的宽高进行等比例拉伸 */
            }
            
            body>div:nth-child(3) {
                width: 10px;
                height: 500px;
                background-repeat: repeat-x;
            }
            
            body>div:nth-child(4) {
                background-origin: border-box;
            }
            
            body>div:nth-child(5) {
                background-origin: content-box;
                /*起始位置*/
                background-clip: content-box;
                /*覆盖的范围*/
            }
            
            body>div:nth-child(6) {
                overflow: scroll;
                background-repeat: no-repeat;
                background-size: 300px 200px;
                background-attachment: local;
            }
            
            body>div>p {
                height: 500px;
            }
            /* background-attach  */
        </style>
    </head>
    
    <body>
        <div>
            第一
    
        </div>
        <div>
            第一
    
        </div>
        <div>
            第一
    
        </div>
        <div>
            第一
    
        </div>
        <div>
            第一
    
        </div>
        <div>
            第六
            <p>段落</p>
            结束
    
        </div>
    
    </body>
    
    </html>