सीएसएस इमेज स्पाइन
- پچھلے پینج सीएसएस इमेज लाइब्रेरी
- آئندہ پینج सीएसएस एट्रिब्यूट सेलेक्टर
ਚਿੱਤਰ ਸਪੀਰਿਟ
ਚਿੱਤਰ ਸਪੀਰਿਟ ਇੱਕ ਚਿੱਤਰ ਵਿੱਚ ਸ਼ਾਮਲ ਚਿੱਤਰਾਂ ਦੀ ਕਲੈਕਸ਼ਨ ਹੈ。
ਚਿੱਤਰਾਂ ਵਾਲੀ ਵੈੱਬਸਾਈਟ ਬਹੁਤ ਸਮੇਂ ਲਈ ਲੋਡ ਹੋ ਸਕਦੀ ਹੈ ਅਤੇ ਕਈ ਸਰਵਰ ਬੇਨਤੀਆਂ ਪੈਦਾ ਕਰ ਸਕਦੀ ਹੈ。
ਚਿੱਤਰ ਸਪੀਰਿਟ ਨਾਲ ਸਰਵਰ ਬੇਨਤੀਆਂ ਦੀ ਸੰਖਿਆ ਘਟਾਉਣ ਅਤੇ ਬੈਂਡਵਿੱਡਥ ਬਚਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ。
ਚਿੱਤਰ ਸਪੀਰਿਟ - ਸਰਲ ਉਦਾਹਰਣ
ਅਸੀਂ ਤਿੰਨ ਅਲੱਗ-ਅਲੱਗ ਚਿੱਤਰਾਂ ਦੀ ਬਜਾਏ ਇੱਕ ਹੀ ਚਿੱਤਰ ("navsprites.gif") ਦੀ ਮਦਦ ਨਾਲ ਵਰਤਦੇ ਹਾਂ
CSS ਦੀ ਮਦਦ ਨਾਲ ਅਸੀਂ ਸਿਰਫ਼ ਜ਼ਰੂਰੀ ਚਿੱਤਰ ਦਾ ਹਿੱਸਾ ਦਿਖਾ ਸਕਦੇ ਹਾਂ。
ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ CSS ਨੇ "navsprites.gif" ਚਿੱਤਰ ਦਾ ਕਿਸ ਹਿੱਸਾ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ：
ਉਦਾਹਰਣ
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
مثال تفسیر:
<img id="home" src="trans.gif">- ਸਿਰਫ਼ ਛੋਟੇ ਪਾਰਦਰਸ਼ੀ ਚਿੱਤਰ ਨਿਰਧਾਰਿਤ ਕਰੋ ਕਿਉਂਕਿ src ਪ੍ਰਾਪਤੀ ਖਾਲੀ ਨਹੀਂ ਹੋ ਸਕਦੀ। ਇਸ ਤੋਂ ਪਰੰਪਰਾਗਤ ਤਰੀਕੇ ਨਾਲ ਵਰਤਾਏ ਜਾਣ ਵਾਲੇ ਚਿੱਤਰ ਪਿਛੋਕੜੀ ਚਿੱਤਰ ਹੋਵੇਗਾ。width: 46px; height: 44px;- ਅਸੀਂ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਚਿੱਤਰ ਦਾ ਹਿੱਸਾ ਨਿਰਧਾਰਿਤ ਕਰੋbackground: url(navsprites.gif) 0 0;- ਪਿਛੋਕੜੀ ਚਿੱਤਰ ਅਤੇ ਸਥਾਨ (left 0px, top 0px) ਨਿਰਧਾਰਿਤ ਕਰੋ
ਚਿੱਤਰ ਸਪੀਰਿਟ - ਨੇਵੀਗੇਸ਼ਨ ਸੂਚੀ ਬਣਾਉਣ
ਅਸੀਂ ਨੇਵੀਗੇਸ਼ਨ ਸੂਚੀ ਬਣਾਉਣ ਲਈ ਸਪੀਰਿਟ ਚਿੱਤਰ ("navsprites.gif") ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹਾਂ。
ਅਸੀਂ ਐੱਚਟੀਐੱਮਐੱਲ ਸੂਚੀ ਵਰਤਾਂਗੇ ਕਿਉਂਕਿ ਇਹ ਲਿੰਕ ਹੋ ਸਕਦੀ ਹੈ ਅਤੇ ਨਾਲ ਹੀ ਪਿਛੋਕੜੀ ਚਿੱਤਰ ਦੀ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ：
ਉਦਾਹਰਣ
#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，删除 list-style，并且所有列表项都均为绝对定位
- #navlist li, #navlist a {height:44px;display:block;} - 所有图片的高度均为 44px
现在开始为每个特定部分设置定位和样式：
- #home {left:0px;width:46px;} - 一直向左定位，图像宽度 46px
- #home {background:url(navsprites.gif) 0 0;} - 定义背景图片及其位置（left 0px, top 0px）
- #prev {left:63px;width:43px;} - 向右定位 63px（#home 宽度 46px + 项目之间的一些额外空间），宽度 43px。
- #prev {background:url('navsprites.gif') -47px 0;} - 定义背景图片向右 47px（#home 宽度 46px + 1px 分隔线）
- #next {left:129px;width:43px;} - 向右定位 129px（#prev 开始是 63px + #prev 的宽度是 43px + 多余的空格），宽度 43px。
- #next {background:url('navsprites.gif') -91px 0;} - 定义背景图片向右 91px（#home 宽度 46px + 1px 分隔线+ #prev 宽度 43px + 1px 分隔线）
图像精灵 - 悬停效果
现在，我们要向导航列表中添加悬停效果。
提示：:hover 选择器可用于所有元素，而不仅限于链接。
我们的新图像（"navsprites_hover.gif"）包含三幅导航图像和三幅用于悬停效果的图像：
因为这是一幅图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，不会有加载延迟。
我们仅添加三行代码来实现悬停效果：
ਉਦਾਹਰਣ
#home a:hover {
background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
مثال تفسیر:
- پچھلے پینج सीएसएस इमेज लाइब्रेरी
- آئندہ پینج सीएसएस एट्रिब्यूट सेलेक्टर
