图片上的白光

图片中间有条渐变的白块，主要是css3的新属性线性渐变的功劳（linear-gradient），附上css样式表

<style>
    .pic-wrap{
         100%;
        position: relative;
        overflow: hidden;
    }
    .pic-wrap img{
         100%;
        height: 300px;
    }
    .pic-wrap:before{
        content: "";
        position: absolute;
         200px;
        height: 100%;
        top: 0;
        left: -250px;
        overflow: hidden;
        background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
        background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
        background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
        -webkit-transform: skewX(-25deg);
        -moz-transform: skewX(-25deg);
    }
    .pic-wrap:hover:before{
        left: 150%;
        transition: left 2s ease 0s;
    }
</style>

我这里是插了一张图片，你也可以用背景图

<div class="pic-wrap">
     <img src="img/bg.jpg" alt="">
</div>