背景图片和五彩导航栏

最新推荐文章于 2023-10-17 16:01:18 发布

原创最新推荐文章于 2023-10-17 16:01:18 发布 · 1.7k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文深入讲解CSS中的背景属性，包括背景图片的URL设置、位置、重复、固定等，以及如何使用RGBA实现背景颜色的透明效果。同时，展示了如何通过:hover伪类在鼠标悬停时改变元素的背景图片。

背景图片url适合logo
方位：left top center right bottom 前后顺序无影响
background-repeat: no-repeat:背景图片是否平铺
background-position： 20px,40px;一定先x后background-attachment：默认scroll(随着页面滚动)，设为固定fixed。
可复合一行使用顺序为：

background tansparent url(img.jpg) reapt fixed top

背景颜色透明： background: rgba(0,0,0,0.5)也可以写.5,省去0。
IE9以上可以使用
三个0表示黑色，第四个表示黑色纯度，百分之50是纯黑色。

<style>
  div {
           width: 1000px;
           height:1000px;
           background-color: orange;
           background-image: url(imge/大头娃娃1.gif);
           background-repeat: no-repeat;
           background-position: center top;
           background-position： 20px,40px;
           background-attachment：fixed;
           background: rgba(0,0,0,0.5)
}
</style>

鼠标点击后更换为摸头效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav a {
            /* 转化为行内块 */
          display: inline-block;
          width: 300px;
          height: 300px;
          background-color: pink;
          text-align: center;
          /* 垂直居中 height=line-height */
          line-height: 300px;
          color: black;
          font-size: 50px;
          /* 下划线无*/
          text-emphasis: none;
        }
        .nav .bg1 {
            background: url(imge/大头娃娃1.gif) no-repeat   ;
        }
        .nav .bg2 {
            background: url(imge/大头娃娃1.gif) no-repeat   ;
        }
        .nav .bg3 {
            background: url(imge/大头娃娃1.gif) no-repeat   ;
        }
        .nav .bg4 {
            background: url(imge/大头娃娃1.gif) no-repeat   ;
        }
        /* 鼠标碰后变了 */
        .nav .bg2:hover {
            background: url(imge/2.gif) no-repeat ;
        }
        .nav .bg3:hover {
            background: url(imge/2.gif) no-repeat ;
        }
        .nav .bg4:hover {
            background: url(imge/2.gif) no-repeat ;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
    </div>
</body>
</html>

在这里插入图片描述