CSS学习之背景相关 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>做个导航栏</title>
        <style>
        .nav a{
             width: 120px;
             height: 50px;
             background-color: #FFD700;
             text-decoration: none;
             display:inline-block;
             text-align: center;
             /* 垂直居中需要用到行高
             行高=上距离+文本高度+下距离 */
             line-height: 50px;
             background-image: url(image/bank6_06.png);
             background-repeat:no-repeat;
             background-position:center;
             /* 默认值，不改变背景图片的高度和宽度 */
             /* background-size:auto; */
             /* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
             /* background-size:100px 50px; */
             /* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
             /* background-size:10%; */
             /* 将背景图片等比缩放填满整个容器 */
             background-size:cover;
             /* 将背景图片等比缩放至某一边紧贴容器边缘 */
             /* background-size:contain; */
             
             /* background-size:120px 50px; */
             
         }
         a:hover{
             /* 鼠标移上去修改背景图片 */
            color:sandybrown;
            /* background-image: url(image/bank6_061.png); */
            /* 鼠标移上去增加一个背景半透明/后面的0.1是透明度 */
            background: rgba(0,0,0,0.1);
         }
         .nav{
              text-align: center;
         }
        </style>
    </head>
    <body>
        <div class="nav">
        <a href="#">体育</a>
        <a href="#">娱乐</a>
        <a href="#">汽车</a>
        </div>
    </body>
</html>

 

posted @ 2021-07-09 11:23  王彬-效率开发  阅读(25)  评论(0)    收藏  举报