最近做项目需要为一个菜单更换图标，项目里面使用了一张大的背景图，上面有所有的图标，每个图标都是20*20的，利用只显示部分背景图来图标。这样可以循环div显示部分背景图片来选择对应的图标，实际上数据库存放的是图标所在背景图片上的坐标。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$().ready(function(){
var width=$('img').width();
var height=$('img').height();
var w=0;
var h=0;
if(width%20==0){<!--如果正好是20的整数倍则就是整除的个数-->
w=width/20;
}else{ <!--否则整数个数+1-->
w=Math.floor(width/20)+1;
}
if(height%20==0){
h=height/20;
}else{
h=Math.floor(height/20)+1;
}
for(var i=0;i<h;i++){<!--循环生成背景图片的DIV-->
for(var j=0;j<w;j++){
$('#icon').append('<div style="background-image: url(\'tabicons.png\');background-position: -'+j*20+'px -'+i*20+'px;width: 16px;height: 16px;float: left;margin: 5px;"></div>');
}
}
});
function aa(){
}
</script>
</head>
<body>
<h2>原图</h2>
<img src="tabicons.png">
<h2>切割之后的图</h2>
<hr/>
<div id="icon">
</div>
</body>
</html>
相关推荐
此属性用于指定背景图片在元素中的具体位置。可以通过不同的关键词组合来精确地定位图片。 - `top`、`bottom`：分别代表顶部和底部。 - `left`、`right`：分别代表左边和右边。 - `center`：居中显示。 - 可以组合...
3. `background-position`: 用于设定背景图片的位置。默认值是`center`，但我们可以根据需要调整，比如居左、居右或居中： ```css body { background-position: center; } ``` 4. `background-repeat`: 防止...
在本文中，我们将深入探讨如何使用CSS3来创建一个全屏背景图片的缩小渐变自动切换特效。这个特效是纯CSS实现的，不依赖任何JavaScript代码，为网站增添了一种优雅且动态的视觉体验。 首先，我们需要理解CSS3中的...
1. **背景图像设置**：CSS3中的`background-image`属性用于设置背景图片，可以指定URL，实现全屏背景通常会结合`background-size`属性。`cover`值可以确保图片自适应填充整个容器，保持宽高比，无论容器尺寸如何变化...
本资源“CSS3的鼠标悬停图片显示文字动画特效”正是一种利用CSS3特性实现的创新交互设计，当用户将鼠标悬停在图片上时，标题文字会以动态的方式滑动显示出来，增加了用户体验的趣味性和吸引力。 这个特效的核心在于...
在网页中，当用户点击一张图片时，图片会在原位置或指定区域以遮罩层的形式放大显示，提供更清晰的查看体验，同时保持页面其他元素的布局不变。这种效果常用于图片展示、产品详情页或者图片相册等场景。 在实现这一...
百分比的值是相对于边框背景图片而言的，例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%，那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小。上下乘高，左右乘宽。 用法和...
3. `transition`属性：用于指定元素的某个或多个CSS属性值在不同状态之间变化时的过渡效果，包括持续时间、速度曲线和延迟等。 4. `@keyframes`规则：用于定义一个动画，包括动画的不同阶段和每个阶段的样式。 5. ...
这个例子设置了红色背景，并在中心位置显示一个不重复的背景图片，图片固定且按比例填充整个div。 总结来说，CSS3的属性选择器和背景缩写是提高CSS代码效率和可读性的关键工具。属性选择器提供更精细的选择元素方式...
CSS3中的`background-size`属性是实现全屏背景的关键，它可以设置为“cover”，使得背景图片自适应填充元素，保持宽高比的同时确保至少一个维度完全覆盖元素。结合`background-position`，我们可以控制图片在背景中...
总之，解决`scroll-view`与CSS左右滑动超出部分背景颜色不显示的问题，需要对小程序的渲染机制、CSS布局以及滚动条样式有深入的理解。通过细致的排查和合理的代码编写，可以确保用户在滑动浏览时获得良好的视觉体验...
2. **过渡（Transition）**：在本项目中，点击图片时，图片会有一个平滑的缩放效果，这就是CSS3的过渡特性。通过设置`transition`属性，我们可以指定一个属性（如`transform`）从一种状态到另一种状态的变化速度。 ...
什么是CSS？ CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是一种标记语言，属于浏览器解释型语言，可以...background-clip(指定背景图片从什么位置开始裁切) background(为一个元素指定多个背景)
在CSS2.1规范中，我们主要依赖`background-repeat`属性来控制背景图片的显示方式，如`repeat`、`repeat-x`、`repeat-y`和`no-repeat`，但这些方式无法实现背景图片的拉伸填充，导致图像可能在容器内重复显示，或者不...
1. **悬停伪类**：CSS3中的`:hover`伪类用于指定元素在鼠标指针悬停时的样式。在这个特效中，我们会在图片元素`:hover`状态下应用遮罩层和文字提示。 2. **绝对定位**：为了实现遮罩层在图片上的滑动效果，我们需要...
【CSS背景颜色例子】 在网页设计中，CSS（层叠样式表）是用于控制网页元素样式的核心技术之一，包括字体、布局、颜色等。本文将深入探讨如何使用CSS设置背景颜色，以创建丰富的视觉效果。 1. 背景颜色的基本语法 ...
【CSS3 Hover图片遮罩文字显示代码】 在网页设计中，CSS3的Hover效果常常用于增强用户体验，使得用户鼠标悬停在元素上时能够触发一些视觉变化。在这个案例中，“css3 hover图片遮罩文字显示代码”是一个巧妙的网页...
3. **设置背景图片位置**： - `background-position:top left;` 图片在上左角。 - `background-position:bottom right;` 图片在下右角。 - 还可以通过像素值（如`background-position:100px 50px;`）精确控制图片...