<!DOCTYPE html><html><head><meta charset="UTF-8"><title>背景图片悬浮放大</title><style>*{padding: 0px;margin: 0px;}.container{width: 80%;margin: 50px auto;color: #FFFFFF;}.item-wrap{position: relative;width: 290px;height: 280px;overflow: hidden;display: inline-block;}.item{width: 100%;height: 100%;transition: all 0.5s;}.item-wrap:hover .item{transform: scale(1.1);}.item-inner{width:100%;height:100%;background: rgba(0, 0, 0, 0) linear-gradient(10deg, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.15) 51%, rgba(0, 0, 0, 0) 70%) repeat scroll 0 0;}.item-txt{position: absolute;width:100%;bottom: 20px;}.container h2{padding-top: 100px;line-height: 50px;text-align: center;}.item:hover{transform: scale(1.2);}.list-item{position: relative;overflow: hidden;display: inline-block;}.list-item img{width: 100%;height: 100%;transition: all 0.5s;}.list-item .item-info{position: absolute;width:100%;bottom:0px;padding-bottom: 20px;background: rgba(0, 0, 0, 0) linear-gradient(10deg, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.15) 51%, rgba(0, 0, 0, 0) 70%) repeat scroll 0 0;}.list-item:hover img{transform: scale(1.1);}</style></head><body><div class="container"><div class="item-wrap"><div class="item" style="background: url(img/jpk1.jpg) no-repeat center center;background-size: 100% 100%;"><div class="item-inner"></div></div><div class="item-txt"><h2>Notice:first message</h2><p>Pay attention,please！This is the first message for you.</p></div></div><div class="item-wrap"><div class="item" style="background: url(img/jpk2.jpg) no-repeat center center;background-size: 100% 100%;"><div class="item-inner"></div></div><div class="item-txt"><h2>Notice:first message</h2><p>Pay attention,please！This is the first message for you.</p></div></div></div><!--================这是一道华丽的分割线============--><div class="container"><div class="list-item"><img src="img/jpk1.jpg"/><div class="item-info"><h2>Notice:first message</h2><p>Pay attention,please！This is the first message for you.</p></div></div><div class="list-item"><img src="img/jpk2.jpg"/><div class="item-info"><h2>Notice:Last message</h2><p>Pay attention,please！This is the first message for you.</p></div></div></div></body></html>
效果图：
