CSS基础-17-图片处理（图片廊、透明图片）

@[toc]

1. 简单图片廊

    
    
    




    

        

            
                
            
            
刘备
        
    

    

        

            
                
            
            
关羽
        
    

    

        

            
                
            
            
张飞
        
    

    

        

            
                
            
            
诸葛亮
        
    

• 效果

  
  
  image.png

• 将浏览器拉窄

  
  
  image.png

• 继续拉窄

  
  
  image.png

2. 响应式图片廊

概念

图片元素可以根据浏览器状况而改变
实质是为图片设置了各种属性，以便图片能更好的播放以方便用户。

完整示例

• 代码

    
    
    




    
响应式图片相册

    

        

            
                
            
            
刘备
        
    


    

        

            
                
            
            
关羽
        
    

    

        

            
                
            
            
张飞
        
    

    

        

            
                
            
            
诸葛亮
        
    

    


    


    

• 查看结果

  
  
  image.png

• 缩小浏览器，图片大小随之改变

  
  
  image.png

• 继续变窄，图片变成两行

  
  
  image.png

2. 透明图片

语法示例

opacity:0.8;

完整示例

• 说明：

IE8和更早版本使用： filter:alpha(opacity=100)。

• 结果显示

  
  
  image.png

• 鼠标放上去之后

  
  
  image.png

---

image.png