CSS背景

最新推荐文章于 2025-05-27 21:13:42 发布

磁悬浮电冰箱

最新推荐文章于 2025-05-27 21:13:42 发布

阅读量29

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_64776610/article/details/131727983

版权

### CSS背景
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
        .bgBox{
            /* width: 800px;
            height: 600px;
            定义背景颜色
            background-color:aquamarine;
            定义背景图片
            background-image:url(./img/a.jpg)
            定义背景图片平铺方式
            background-repeat：none-repeat;
            定义背景图片大小 css3新增属性
            background-size：100% 100%；
            
            */
            background: pink url(./img/a.jpg);
            background-size: 100px 100px ;
        }

        /* 
        行内元素 span a
        行内块元素 img 表单（input、select、textarea）
        块级元素 div p h1-h6 ul li hr br 

        .bgBox:hover .smallbox2{
            dipspaly:block;
        }
        
        */
        .smallBox{
            width: 300px;
            height: 200px;
            background-color: pink;
        /* display:
            inline-block: 设置行内块元素，宽高生效，不独占一行
            block： 设置为块元素,宽高生效，独占一行
            inline：设置行内元素，宽高不生效

            none： 隐藏
        */
        /* display：inline */
        }
       .smallBox2{
        background-color: green;
       }
       .smallBox2:hover+.smallBox3{
        display: none;

       }
       .smallBox3{
        background-color: aquamarine;
        /* 
        dispaly :none
        visibility:hidden;

        */
       }
       .spanbox{
        width: 100px;
        height: 100px;
        background-color: yellow;
        display: block;
       }

    </style>
</head>
<body>
   <div>
    <div class="smallBox smallBox1"></div>
    <div class="smallBox smallBox2"></div>
    <div class="smallBox smallBox3"></div>
    <div class="smallBox"></div>
    <span class="spanbox"></span>
    <span class="spanbox"></span>
    <span class="spanbox"></span>
   </div>
</body>
</html>


```

```