您的位置：首页 > Web前端 > CSS

CSS+HTML 利用背景background添加图片

2018-02-25 12:40 183 查看 
可以用CSS+html实现图片的添加与切换，不需要总是加img，可以换方向考虑，加入背景图片，用padding撑开盒子，添加background，去重复就可以，
代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.header-nav .icon-item{
display: inline-block;
margin: 10px;
width: 46px;
padding-top: 50px;
text-align: center;
background-repeat:no-repeat;
}

.header-nav .nav-left .icon1{
background-image:url(img/2_03.png);
}
.header-nav .nav-left .icon2{
background-image:url(img/2_05.png);
}
.header-nav .nav-left .icon3{
background-image:url(img/2_07.png);
}
.header-nav .nav-left .icon4{
background-image:url(img/2_09.png);
}
.header-nav .nav-left .icon5{
background-image:url(img/2_11.png);
}

.header-nav .nav-left .icon1:hover{
background-image:url(img/3_03.png);
}
.header-nav .nav-left .icon2:hover{
background-image:url(img/3_05.png);
}
.header-nav .nav-left .icon3:hover{
background-image:url(img/3_07.png);
}
.header-nav .nav-left .icon4:hover{
background-image:url(img/3_09.png);
}
.header-nav .nav-left .icon5:hover{
background-image:url(img/3_11.png);
}.header-nav .nav-right .icon1:hover{
background-image:url(img/3_13.png);
}

</style>
</head>
<body>
<div class="header-nav">
<div class="nav-left">
<div class="icon-item icon1">美食</div>
<div class="icon-item icon2">美食</div>
<div class="icon-item icon3">美食</div>
<div class="icon-item icon4">美食</div>
<div class="icon-item icon5">美食</div>
</div>
</body>
</html>
鼠标移动上后

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航