首页 > 其他分享 >前端必知必会-CSS 图片库和图像精灵

前端必知必会-CSS 图片库和图像精灵

时间:2024-08-25 10:55:07浏览次数:13  
标签:navsprites img 图片库 必知 gif url background 图像 CSS

文章目录


CSS 图片库

CSS 可用于创建图片库。

在这里插入图片描述

以下图片库使用 CSS 创建:

示例

<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">在此处添加图片说明</div>
</div>

<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">在此处添加图片说明</div>
</div>

<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">在此处添加图片说明</div>
</div>

<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">在此处添加图片说明</div>
</div>

</body>
</html>

CSS 图像精灵

图像精灵
图像精灵是将多幅图像组合成一幅图像。

包含许多图像的网页可能需要很长时间才能加载,并会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节省带宽。

图像精灵 - 简单示例

我们不使用三幅单独的图像,而是使用这幅单幅图像(“img_navsprites.gif”):

在这里插入图片描述

使用 CSS,我们可以只显示我们需要的图像部分。

在以下示例中,CSS 指定要显示“img_navsprites.gif”图像的哪一部分:

示例

#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

示例说明:

<img id="home" src="img_trans.gif"> - 仅定义一个小的透明图像,因为 src 属性不能为空。显示的图像将是我们在 CSS 中指定的背景图像
width: 46px; height: 44px; - 定义我们要使用的图像部分
background: url(img_navsprites.gif) 0 0; - 定义背景图像及其位置(左侧 0px,顶部 0px)
这是使用图像精灵的最简单方法,现在我们想通过使用链接和悬停效果来扩展它。

图像精灵 - 创建导航列表

我们想使用精灵图像(“img_navsprites.gif”)来创建导航列表。

我们将使用 HTML 列表,因为它可以是链接,也支持背景图像:

示例

#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;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

示例解释:

#navlist {position:relative;} - 位置设置为相对,以允许在其中进行绝对定位
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 边距和填充设置为 0,删除列表样式,所有列表项都绝对定位
#navlist li, #navlist a {height:44px;display:block;} - 所有图像的高度为 44px
现在开始为每个特定部分定位和设置样式:

#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’) -91px 0;} - 将背景图像定义为右侧 91px(#home 宽度 46px + 1px 线分隔符 + #prev 宽度 43px + 1px 线分隔符)

图像精灵 - 悬停效果

在这里插入图片描述

现在我们想在导航列表中添加悬停效果。

提示::hover 选择器可用于所有元素,而不仅仅是链接。

我们的新图像(“img_navsprites_hover.gif”)包含三个导航图像和三个用于悬停效果的图像:

因为这是一张单一图像,而不是六个单独的文件,所以当用户将鼠标悬停在图像上时不会出现加载延迟。

我们只添加三行代码来添加悬停效果:

示例

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

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

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

示例说明:

#home a:hover {background: url(‘img_navsprites_hover.gif’) 0 -45px;} - 对于所有三个悬停图像,我们指定相同的背景位置,仅向下 45px


总结

本文介绍了的CSS 图片库和图像精灵使用,如有问题欢迎私信和评论

标签:navsprites,img,图片库,必知,gif,url,background,图像,CSS
From: https://blog.csdn.net/qq_24018193/article/details/141476272

相关文章

  • CSS属性background-position-y实现动画
    CSS属性background-position-y实现动画引言background-position-y属性用于设置初始状态时背景图片在垂直方向的位置,这个位置相对于通过background-origin定义的背景层原点进行定位,详见MDN文档。今天要分享的是如何利用background-position-y属性实现简单的动画,源图是静......
  • 前端速通面经八股系列(一)—— CSS篇
    CSS高频面经目录一、CSS基础1.CSS选择器及其优先级2.CSS中可继承与不可继承属性有哪些3.display的属性值及其作用4.display的block、inline和inline-block的区别5.隐藏元素的方法有哪些6.link和@import的区别7.transition和animation的区别8.display:none与visi......
  • 【html+css 绚丽Loading】000016 四维玄方
    前言:哈喽,大家好,今天给大家分享html+css绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • CSS属性
    一、CSS列表样式1、list-style-type属性(列表项标记)CSS列表属性允许我们设置不同的列表项标记。 在HTML中,有​两种类型​的列表:​无序列表​(<ul>) - 列表项目用​项目符号​标记​有序列表​(<ol>) - 列表项目用​数字​或​字母​标记使用CSS,列表可以进一步风格化,图像可......
  • CSS文字横向合并属性text-combine-upright
    在CSS中,text-combine-upright属性是用于控制东亚语言(如中文、日文、韩文)中两个或多个字符在垂直排版时的合并显示方式。这个属性主要用于在垂直书写的文本中,将横向排列的字符(如数字、拉丁字母或某些东亚字符)合并为一个紧凑的垂直排列的单元,以提高可读性或美观性。text-com......
  • Css单行文字超出_Css多行文字超出
    一、Css单行文字超出  二、Css单行文字超出+行高设置(推荐)  三、Css多行文字超出  四、Css多行文字超出+行高设置(推荐)  更多:CSS3网页布局之文字布局和文字超出处理Css文字垂直方向居中整理Css文字选中设置样式/Css禁止文字选中word-wrap和word-b......
  • React 和 Vite 环境下 TailwindCSS 的配置指南
    1.安装tailwindcssnpminstall-Dtailwindcsspostcssautoprefixer2.生成tailwindcss配置文件npxtailwindinit-p3.tailwind.config.js配置/**@type{import('tailwindcss').Config}*/exportdefault{content:["./index.html",&q......
  • CSS 的了解text-rendering属性
    text-renderingCSS属性提供了对浏览器如何渲染文本的控制。它主要用于优化文本显示,尤其是在需要处理大量文本或特定字体样式的场景下。通过设置这个属性,开发者可以影响文本的可读性、清晰度或渲染速度。text-rendering属性主要有以下几个值:auto:默认值。浏览器将自动决......
  • CSS3页面布局-三栏-固定宽度布局
    布局的基本概念多栏布局三种基本实现方案:固定宽度,流动,弹性。固定宽度布局:大小不会随用户调整浏览器窗口大小。一版960-1100,960常见,可以被3,4,5,6,8,10,12,16整除。流动布局:大小会随用户调整浏览器窗口大小而变化。可以更好适应大屏幕,也叫响应式。弹性布局:所有元素大小也......
  • CSS实现好看的文字渐变
    在CSS中,可以使用以下几种方法来实现文字渐变效果:使用background-image、-webkit-background-clip和-webkit-text-fill-color属性:这是一种比较常见的方法,适用于大多数浏览器。首先,使用background-image属性设置一个渐变背景,然后使用-webkit-background-clip属性将背景裁剪为文字......