CSS Image 图像

前言

  • 使用 CSS 很容易创建透明的图像。
  • CSS Opacity 属性是 W3C 的 CSS3 建议的一部分。

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

  • 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
  • 使用图像拼合会降低服务器的请求数量,并节省带宽。

1、图片廊

  • 以下是使用 CSS 创建图片廊。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <style>
    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;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo10.png">
    <img src="https://demo.qianchia.com/media/image/demo10.png" alt="图片文本描述" width="300" height="200" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo11.png">
    <img src="https://demo.qianchia.com/media/image/demo11.png" alt="图片文本描述" width="300" height="200" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo12.png">
    <img src="https://demo.qianchia.com/media/image/demo12.png" alt="图片文本描述" width="300" height="200" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo13.png">
    <img src="https://demo.qianchia.com/media/image/demo13.png" alt="图片文本描述" width="300" height="200" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>
  • 效果





    图片文本描述

    这里添加图片文本描述





    图片文本描述

    这里添加图片文本描述





    图片文本描述

    这里添加图片文本描述





    图片文本描述

    这里添加图片文本描述



1.1 响应式图片廊

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <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>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo10.png">
    <img src="https://demo.qianchia.com/media/image/demo10.png" alt="图片文本描述" width="300" height="200" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo11.png">
    <img src="https://demo.qianchia.com/media/image/demo11.png" alt="图片文本描述" width="600" height="400" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo12.png">
    <img src="https://demo.qianchia.com/media/image/demo12.png" alt="图片文本描述" width="600" height="400" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo13.png">
    <img src="https://demo.qianchia.com/media/image/demo13.png" alt="图片文本描述" width="600" height="400" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="clearfix"></div>
  • 效果





    图片文本描述

    这里添加图片文本描述





    图片文本描述

    这里添加图片文本描述





    图片文本描述

    这里添加图片文本描述





    图片文本描述

    这里添加图片文本描述



  • 重置浏览器大小查看效果。

2、透明/不透明

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

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

2.1 创建

  • CSS3 中属性的透明度是 opacity。

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

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

  • 正常的图像

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
    img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* IE8 及其更早版本 */
    }
    </style>
    1
    <img src="https://demo.qianchia.com/media/image/demo6.png" alt="Trolltunga Norway" width="200" height="150" />
  • 效果

2.2 悬停

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* IE8 及其更早版本 */
    }

    img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* IE8 及其更早版本 */
    }
    </style>
    1
    <img src="https://demo.qianchia.com/media/image/demo6.png" alt="Trolltunga Norway" width="200" height="150" />
  • 效果

      

  • 解析

    • 第一个 CSS 块是和上例中的代码类似。此外,还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下,当用户将鼠标悬停在图像上时,我们希望图片是清晰的。
    • 此 CSS 是:opacity=1.
    • IE8 和更早版本使用:filter: alpha(opacity=100)
    • 当鼠标指针远离图像时,图像将重新具有透明度。

2.3 文字

  • 透明的盒子中的文字

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <style>
    div.background {
    width: 500px;
    height: 250px;
    background: url(https://demo.qianchia.com/media/image/demo6.png) 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>
    1
    2
    3
    4
    5
    6
    7
    <div class="background">
    <div class="transbox">
    <p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
    这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
    </p>
    </div>
    </div>
  • 效果

  • 解析

    • 首先,创建一个固定的高度和宽度的 div 元素,带有一个背景图片和边框。
    • 然后在第一个 div 内部创建一个较小的 div 元素。这个 div 也有一个固定的宽度,背景颜色,边框 - 而且它是透明的。
    • 透明的 div 里面,在 p 元素内部添加一些文本。

3、拼合

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

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

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

3.1 实例

  • 与其使用三个独立的图像,不如使用这种单个图像(”demo14.png”)。

  • 有了 CSS,我们可以只显示我们需要的图像的一部分。

  • 在下面的例子 CSS 指定显示 “demo14.png” 的图像的一部分。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
    img.home {
    width: 46px;
    height: 44px;
    background: url(https://demo.qianchia.com/media/image/demo14.png) 0 0;
    }

    img.next {
    width: 43px;
    height: 44px;
    background: url(https://demo.qianchia.com/media/image/demo14.png) -91px 0;
    }
    </style>
    1
    2
    <img class="home" src="https://demo.qianchia.com/media/image/demo15.png" /> <br /><br />
    <img class="next" src="https://demo.qianchia.com/media/image/demo15.png" />
  • 效果

  • 解析

    • <img class="home" src=".../demo15.png" /> - 因为不能为空,src 属性只定义了一个小的透明图像。显示的图像将是我们在 CSS 中指定的背景图像。
    • 宽度:46px; 高度:44px; - 定义我们使用的那部分图像。
    • background: url(.../demo14.png) 0 0; - 定义背景图像和它的位置(左 0px,顶部 0px)。

3.2 链接

  • 上例使用图像拼合最简单的方法,现在我们使用链接。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <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(https://demo.qianchia.com/media/image/demo14.png) 0 0;
    }

    .prev {
    left: 63px;
    width: 43px;
    }
    .prev {
    background: url(https://demo.qianchia.com/media/image/demo14.png) -47px 0;
    }

    .next {
    left: 129px;
    width: 43px;
    }
    .next {
    background: url(https://demo.qianchia.com/media/image/demo14.png) -91px 0;
    }
    </style>
    1
    2
    3
    4
    5
    <ul class="navlist">
    <li class="home"><a href="https://www.qianchia.com" target="_blank"></a></li>
    <li class="prev"><a href="https://blog.qianchia.com" target="_blank"></a></li>
    <li class="next"><a href="https://mp.qianchia.com" target="_blank"></a></li>
    </ul>
  • 效果

  • 解析

    • .navlist {position: relative;} - 位置设置相对定位,让里面的绝对定位。
    • .navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin 和 padding 设置为 0,列表样式被删除,所有列表项是绝对定位。
    • .navlist li, .navlist a {height: 44px; display: block;} - 所有图像的高度是 44px。

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

      • .home {left: 0px; width: 46px;} - 定位到最左边的方式,以及图像的宽度是 46px。
      • .home {background: url(.../demo14.png) 0 0;} - 定义背景图像和它的位置(左 0px,顶部 0px)。
      • .prev {left: 63px; width: 43px;} - 右侧定位 63px(.home 宽 46px + 项目之间的一些多余的空间),宽度为 43px。
      • .prev {background: url(.../demo14.png) -47px 0;} - 定义背景图像右侧 47px(.home 宽 46px + 分隔线的 1px)。
      • .next {left: 129px; width: 43px;} - 右边定位 129px (.prev 63px + .prev 宽是 43px + 剩余的空间), 宽度是 43px。
      • .next {background: url(.../demo14.png) no-repeat -91px 0;} - 定义背景图像右边 91px(.home 46px + 1px 的分割线 + .prev 宽 43px + 1px 的分隔线)。

3.3 悬停

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

  • :hover 选择器用于鼠标悬停在元素上的显示的效果,:hover 选择器可以运用于所有元素。

  • 我们的新图像 (“demo16.png”) 包含三个导航图像和三幅图像。

  • 因为这是一个单一的图像,而不是 6 个单独的图像文件,当用户停留在图像上不会有延迟加载。

  • 我们添加悬停效果只添加三行代码。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    <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(https://demo.qianchia.com/media/image/demo16.png) 0 0;
    }
    .home a:hover {
    background: url(https://demo.qianchia.com/media/image/demo16.png) 0 -45px;
    }

    .prev {
    left: 63px;
    width: 43px;
    }
    .prev {
    background: url(https://demo.qianchia.com/media/image/demo16.png) -47px 0;
    }
    .prev a:hover {
    background: url(https://demo.qianchia.com/media/image/demo16.png) -47px -45px;
    }

    .next {
    left: 129px;
    width: 43px;
    }
    .next {
    background: url(https://demo.qianchia.com/media/image/demo16.png) -91px 0;
    }
    .next a:hover {
    background: url(https://demo.qianchia.com/media/image/demo16.png) -91px -45px;
    }
    </style>
    1
    2
    3
    4
    5
    <ul class="navlist">
    <li class="home"><a href="https://www.qianchia.com" target="_blank"></a></li>
    <li class="prev"><a href="https://blog.qianchia.com" target="_blank"></a></li>
    <li class="next"><a href="https://mp.qianchia.com" target="_blank"></a></li>
    </ul>
  • 效果

  • 解析:

    • 由于该列表项包含一个链接,我们可以使用 :hover 伪类。
    • .home a:hover{background: transparent url(.../demo16.png) 0 -45px;} - 对于所有三个悬停图像,我们指定相同的背景位置,只是每个再向下 45px。

4、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、图片廊
    1. 2.1. 1.1 响应式图片廊
  3. 3. 2、透明/不透明
    1. 3.1. 2.1 创建
    2. 3.2. 2.2 悬停
    3. 3.3. 2.3 文字
  4. 4. 3、拼合
    1. 4.1. 3.1 实例
    2. 4.2. 3.2 链接
    3. 4.3. 3.3 悬停
  5. 5. 4、CSS 实例
隐藏目录