css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术

悠悠 2023-10-06 22:33 8阅读 0赞

#### 阅读目录 ####

*  CSS 图片廊
 *   *  公共的HTML布局
     *  CSS 创建图片廊
     *  响应式图片廊
 *  CSS 图像透明/不透明
 *   *  创建一个透明图像
     *  图像的透明度 – 悬停效果
     *  透明的盒子中的文字
 *  CSS 图像拼合技术
 *   *  图像拼合
     *  图像拼合 – 简单实例
     *   *  实例解析：
     *  图像拼合 – 创建一个导航列表
     *   *  实例解析：
     *  图像拼合s – 悬停效果
     *   *  实例解析：

## CSS 图片廊 ##

### 公共的HTML布局 ###

首先是我们用到的公共的HTML布局，下面的例子都将用到：

![在这里插入图片描述][06815658b54d43cb97ee389ec8d272f2.gif_pic_center]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单</title>
        <style>
           
        </style>
    </head>
    <body>
    
    /* HTML */
    <div class="responsive">
        <div class="img">
        <a target="_blank" href="3.jpg">
            <img src="3.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
        
    <div class="responsive">
        <div class="img">
        <a target="_blank" href="5.jpg">
            <img src="5.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
        
    <div class="responsive">
        <div class="img">
        <a target="_blank" href="a.jpg">
            <img src="a.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
        
    <div class="responsive">
        <div class="img">
        <a target="_blank" href="shopping_cart.png">
            <img src="shopping_cart.png" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
    
    </body>
    </html>

### CSS 创建图片廊 ###

/* CSS */
    div.img {
        
        margin: 5px;
        border: 1px solid #ccc;
        float: left;
        width: 180px;
    }
    
    div.img:hover {
        
        border: 1px solid #777;
    }
    
    div.img img {
        
        width: 100%;
        height: auto;
    }
    
    div.desc {
        
        padding: 15px;
        text-align: center;
    }

![在这里插入图片描述][2acd6691c10e4df9b38a3572fb56cd0e.png]

### 响应式图片廊 ###

使用 CSS3 的媒体查询来创建响应式图片廊：

![在这里插入图片描述][01b4559b570444bc81de0247cc9e7c60.gif_pic_center]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单</title>
        <style>
            div.img {
          
                border: 1px solid #ccc;
            }
    
            div.img:hover {
          
                border: 1px solid #777;
            }
    
            div.img img {
          
                width: 100%;
                height: auto;
            }
    
            div.desc {
          
                padding: 15px;
                text-align: center;
            }
    
            * {
          
                box-sizing: border-box;
            }
    
            .responsive {
          
                padding: 0 6px;
                float: left;
                width: 24.99999%;
            }
    
            @media only screen and (max-width: 700px){
          
                .responsive {
          
                    width: 49.99999%;
                    margin: 6px 0;
                }
            }
    
            @media only screen and (max-width: 500px){
          
                .responsive {
          
                    width: 100%;
                }
            }
    
            .clearfix:after {
          
                content: "";
                display: table;
                clear: both;
            }
        </style>
    </head>
    <body>
    
    <div class="responsive">
        <div class="img">
        <a target="_blank" href="3.jpg">
            <img src="3.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
        
    <div class="responsive">
        <div class="img">
        <a target="_blank" href="5.jpg">
            <img src="5.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
        
    <div class="responsive">
        <div class="img">
        <a target="_blank" href="a.jpg">
            <img src="a.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
        
    <div class="responsive">
        <div class="img">
        <a target="_blank" href="shopping_cart.png">
            <img src="shopping_cart.png" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
    
    </body>
    </html>

## CSS 图像透明/不透明 ##

使用CSS很容易创建透明的图像。

注意：CSS `Opacity` 属性是W3C的CSS3建议的一部分。

### 创建一个透明图像 ###

CSS3中属性的透明度是 `opacity`。首先，我们将向您展示如何用CSS创建一个透明图像。

正常的图像

![在这里插入图片描述][00cc0a09d2924125992259899c8aa472.png]  
相同的图像带有透明度：  
![在这里插入图片描述][f508ae4a1ead4934af28832236b226ff.png]  
看看下面的CSS：

img {
        
      opacity:0.4;
      filter:alpha(opacity=40); /* IE8 及其更早版本 */
    }

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

### 图像的透明度 – 悬停效果 ###

![在这里插入图片描述][3006651a55424e5e9c788e9b626d8cd1.gif_pic_center]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单</title>
        <style>
            img {
          
                opacity:0.4;
                filter:alpha(opacity=40); /*  IE8 及其更早版本 */
            }
            img:hover {
          
                opacity:1.0;
                filter:alpha(opacity=100); /* IE8 及其更早版本 */
            }
        </style>
    </head>
    <body>
    
        <img src="3.jpg" alt="图片文本描述" width="300" height="200">
    
    </body>
    </html>

第一个CSS块是和例1中的代码类似。  
此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。  
在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。

此CSS是：`opacity=1`.

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

当鼠标指针远离图像时，图像将重新具有透明度。

### 透明的盒子中的文字 ###

![在这里插入图片描述][fb5142315de44c31b10184ad1ac00e32.png]  
首先，我们创建一个固定的高度和宽度的 div 元素，带有一个背景图片和边框。

然后我们在第一个 div 内部创建一个较小的 div 元素。

这个div也有一个固定的宽度，背景颜色，边框 – 而且它是透明的。透明的div里面，我们在P元素内部添加一些文本。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单</title>
        <style>
            div.background {
          
                width:500px;
                height:250px;
                background:url(3.jpg) repeat;
                border:2px solid black;
            }
            div.transbox {
          
                width:400px;
                height:180px;
                margin:30px 50px;
                background-color:#ffffff;
                border:1px solid black;
                opacity:0.6;
                filter:alpha(opacity=60); /* IE8 及更早版本 */
            }
            div.transbox p {
          
                margin:30px 40px;
                font-weight:bold;
                color:#000000;
            }
        </style>
    </head>
    <body>
    
        <div class="background">
            <div class="transbox">
                <p>这些文本在透明框里。
                ...
                </p>
            </div>
        </div>
    
    </body>
    </html>

## CSS 图像拼合技术 ##

### 图像拼合 ###

图像拼合就是单个图像的集合。

有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会降低服务器的请求数量，并节省带宽。

### 图像拼合 – 简单实例 ###

与其使用三个独立的图像，不如我们使用这种单个图像（ `”img_navsprites.gif”` ）：

![在这里插入图片描述][90bd7aee919d4e0f997f6893c7938a7f.gif_pic_center]  
有了CSS，我们可以只显示我们需要的图像的一部分。

在下面的例子CSS指定显示 `“img_navsprites.gif”` 的图像的一部分：

效果如下：

![在这里插入图片描述][8198bbc2346845d8ac89a5845b9cea41.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单</title>
        <style>
            img.home {
          
                width: 46px;
                height: 44px;
                background: url(img_navsprites.gif) 0 0;
            }
    
            img.next {
          
                width: 43px;
                height: 44px;
                background: url(img_navsprites.gif) -91px 0;
            }
        </style>
    </head>
    <body>
    
        <img class="home" src="Background.png"><br><br>
        <img class="next" src="Background.png">
    
    </body>
    </html>

以下 `Background.png`：透明图片：![在这里插入图片描述][e72516e6c577400dba2aea34f6ae12e5.png_pic_center]

#### 实例解析： ####

`<img class="home" src="img_trans.gif" />` \- 因为不能为空，src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像

宽度：46px;高度：44px; – 定义我们使用的那部分图像

`background:url(img_navsprites.gif) 0 0;` – 定义背景图像和它的位置（左0px，顶部0px）

这是使用图像拼合最简单的方法，现在我们使用链接和悬停效果。

### 图像拼合 – 创建一个导航列表 ###

我们想使用拼合图像 `(“img_navsprites.gif”)` ，以创建一个导航列表。

我们将使用一个HTML列表，因为它可以链接，同时还支持背景图像：

![在这里插入图片描述][eb10c8329ee045b6b777ec7ee63eee4a.gif_pic_center]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>图像拼合 – 创建一个导航列表</title>
        <style>
            #navlist {
          
                position: relative;
            }
    
            #navlist li {
          
                margin: 0;
                padding: 0;
                list-style: none;
                position: absolute;
                top: 0;
            }
    
            #navlist li,
            #navlist a {
          
                height: 44px;
                display: block;
            }
    
            #home {
          
                left: 0px;
                width: 46px;
            }
    
            #home {
          
                background: url('img_navsprites.gif') 0 0;
            }
    
            #prev {
          
                left: 63px;
                width: 43px;
            }
    
            #prev {
          
                background: url('img_navsprites.gif') -47px 0;
            }
    
            #next {
          
                left: 129px;
                width: 43px;
            }
    
            #next {
          
                background: url('img_navsprites.gif') -91px 0;
            }
        </style>
    </head>
    <body>
    
        <ul id="navlist">
            <li id="home"><a href="/"></a></li>
            <li id="prev"><a href="/css/"></a></li>
            <li id="next"><a href="/css/"></a></li>
        </ul>
    
    </body>
    </html>

#### 实例解析： ####

`#navlist{position:relative;}` – 位置设置相对定位，让里面的绝对定位

#navlist li {
        
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 0;
    }

margin 和 padding 设置为 0，列表样式被删除，所有列表项是绝对定位。

所有图像的高度是44px

#navlist li,
    #navlist a {
        
        height: 44px;
        display: block;
    }

现在开始每个具体部分的定位和样式：

`#home{left:0px;width:46px;}`  
定位到最左边的方式，以及图像的宽度是46px

`#home{background:url(img_navsprites.gif) 0 0;}`  
定义背景图像和它的位置（左0px，顶部0px）

`#prev{left:63px;width:43px;}`  
右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。

`#prev{background:url('img_navsprites.gif') -47px 0;}`  
定义背景图像右侧47px（＃home 宽 46px+ 分隔线的 1px）

`#next{left:129px;width:43px;}`  
右边定位 129px(\#prev 63px + \#prev宽是43px + 剩余的空间), 宽度是43px.

`#next{background:url('img_navsprites.gif') no-repeat -91px 0;}`  
定义背景图像右边 91px（\#home 46px+1px的分割线+\#prev宽43px+1px的分隔线）

### 图像拼合s – 悬停效果 ###

现在，我们希望我们的导航列表中添加一个悬停效果。

`:hover` 选择器用于鼠标悬停在元素上的显示的效果

提示： :hover 选择器可以运用于所有元素。

我们的新图像 `(“img_navsprites_hover.gif”)` 包含三个导航图像和三幅图像：

![在这里插入图片描述][f46d039c8dd844b1bff4881e6ec51a5e.gif_pic_center]  
因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载。

![在这里插入图片描述][91b08b2e731845b89c111ba2b399956c.gif_pic_center]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>图像</title>
        <style>
            #navlist {
          
                position: relative;
            }
    
            #navlist li {
          
                margin: 0;
                padding: 0;
                list-style: none;
                position: absolute;
                top: 0;
            }
    
            #navlist li,
            #navlist a {
          
                height: 44px;
                display: block;
            }
    
            #home {
          
                left: 0px;
                width: 46px;
            }
    
            #home {
          
                background: url('img_navsprites_hover.gif') 0 0;
            }
    
            #home a:hover {
          
                background: url('img_navsprites_hover.gif') 0 -45px;
            }
    
            #prev {
          
                left: 63px;
                width: 43px;
            }
    
            #prev {
          
                background: url('img_navsprites_hover.gif') -47px 0;
            }
    
            #prev a:hover {
          
                background: url('img_navsprites_hover.gif') -47px -45px;
            }
    
            #next {
          
                left: 129px;
                width: 43px;
            }
    
            #next {
          
                background: url('img_navsprites_hover.gif') -91px 0;
            }
    
            #next a:hover {
          
                background: url('img_navsprites_hover.gif') -91px -45px;
            }
        </style>
    </head>
    <body>
    
        <ul id="navlist">
            <li id="home"><a href="/"></a></li>
            <li id="prev"><a href="/"></a></li>
            <li id="next"><a href="/"></a></li>
        </ul>
    
    </body>
    </html>

#### 实例解析： ####

由于该列表项包含一个链接，我们可以使用：hover 伪类。

#home a:hover {
        
    		            background: url('img_navsprites_hover.gif') 0 -45px;
    		        }

对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px。

[06815658b54d43cb97ee389ec8d272f2.gif_pic_center]: https://img-blog.csdnimg.cn/06815658b54d43cb97ee389ec8d272f2.gif#pic_center
[2acd6691c10e4df9b38a3572fb56cd0e.png]: https://img-blog.csdnimg.cn/2acd6691c10e4df9b38a3572fb56cd0e.png
[01b4559b570444bc81de0247cc9e7c60.gif_pic_center]: https://img-blog.csdnimg.cn/01b4559b570444bc81de0247cc9e7c60.gif#pic_center
[00cc0a09d2924125992259899c8aa472.png]: https://img-blog.csdnimg.cn/00cc0a09d2924125992259899c8aa472.png
[f508ae4a1ead4934af28832236b226ff.png]: https://img-blog.csdnimg.cn/f508ae4a1ead4934af28832236b226ff.png
[3006651a55424e5e9c788e9b626d8cd1.gif_pic_center]: https://img-blog.csdnimg.cn/3006651a55424e5e9c788e9b626d8cd1.gif#pic_center
[fb5142315de44c31b10184ad1ac00e32.png]: https://img-blog.csdnimg.cn/fb5142315de44c31b10184ad1ac00e32.png
[90bd7aee919d4e0f997f6893c7938a7f.gif_pic_center]: https://img-blog.csdnimg.cn/90bd7aee919d4e0f997f6893c7938a7f.gif#pic_center
[8198bbc2346845d8ac89a5845b9cea41.png]: https://img-blog.csdnimg.cn/8198bbc2346845d8ac89a5845b9cea41.png
[e72516e6c577400dba2aea34f6ae12e5.png_pic_center]: https://img-blog.csdnimg.cn/e72516e6c577400dba2aea34f6ae12e5.png#pic_center
[eb10c8329ee045b6b777ec7ee63eee4a.gif_pic_center]: https://img-blog.csdnimg.cn/eb10c8329ee045b6b777ec7ee63eee4a.gif#pic_center
[f46d039c8dd844b1bff4881e6ec51a5e.gif_pic_center]: https://img-blog.csdnimg.cn/f46d039c8dd844b1bff4881e6ec51a5e.gif#pic_center
[91b08b2e731845b89c111ba2b399956c.gif_pic_center]: https://img-blog.csdnimg.cn/91b08b2e731845b89c111ba2b399956c.gif#pic_center