为图片添加内阴影效果

<!DOCTYPE html>
<html>
  <head>
    <title>img父元素实现图片内阴影</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery-img.js"></script>
    
    <style>    
      .demo1{
            width:300px;
            height:300px;
            box-shadow:0 0 30px blue inset;
            -webkit-box-shadow:0 0 30px blue inset;
            -moz-box-shadow:0 0 30px blue inset;
            -o-box-shadow:0 0 30px blue inset;
        
      
      }
      .demo2 img{
            box-shadow:0 0 30px blue inset;
            -webkit-box-shadow:0 0 30px blue inset;
            -moz-box-shadow:0 0 30px blue inset;
            -o-box-shadow:0 0 30px blue inset;
        
      }
      
      .demo3{
            -webkit-box-shadow:inset 0 0 30px blue;
            -moz-box-shadow:inset 0 0 30px blue;
            box-shadow:inset 0 0 30px blue;
            display:inline-block;
      }
      .demo3 img{
            position:relative;
            z-index:-1;
      }
      
      .demo4{
            position:relative;
            display:inline-block;
            *display:inline;
      }
      .demo4:before{
            content:"";
            position:absolute;
            width:100%;
            height:100%;
            -webkit-box-shadow:0 0 30px blue inset;
            -moz-box-shadow:0 0 30px blue inset;
            -o-box-shadow:0 0 30px blue inset;
      }
      
    
      .demo5-img{
            box-shadow: 0 0 30px red inset;
            -webkit-box-shadow: 0 0 30px red inset;
            -moz-box-shadow: 0 0 30px red inset;
      }
      
    
    </style>
  </head>
  <body>    
      <h3>给div元素添加内阴影效果</h3>
      <div class="demo1"></div>
      <div class="demo2">
          <img src="images/inset.jpg" alt="boxshow"/>
      </div>
      
      <h3>法一:通过设置一个div给它,然后对该父元素进行设置内阴影</h3>
      <div class="demo3">
          <img src="images/inset.jpg" alt="boxshow"/>
      </div>
      <h3>法二:在img父元素上应用:before伪元素来实现</h3>
      <div class="demo4">
        <img src="images/inset.jpg" alt="boxshow"/>
      </div>
      
    
    <h3>法三:利用jQuery方法来实现img内阴影</h3>
    <h5>原理:通过jQuery把img标签转换为div元素,把img元素转换成div的背景元素。,我们都知道在div元素使用内阴影是没有问题的。</h5>
    
      <img src="images/inset.jpg" alt="boxshow" class="demo5-img"/>
      
  </body>
</html>


jQuery-img.js

$(document).ready(function(){
  $('img.demo5-img').each(function(){
    var $img = $(this);
    $img.load(function(){
      var $div = $('<div/>');
      $div.width($img.width());
      $div.height($img.height());
      $div.css('background-image','url('+$img.attr('src')+')');
      var display = $img.css('display');
      
      if(display === 'inline'){
        $div.css('display','inline-block');
      }else{
        $div.css('display',display);
      }
      $div.attr('class',$img.attr('class'));
      $img.replaceWith($div);
    });
  });
});

暂无评论

发布评论

扫一扫,加我为微信好友 加我为微信好友