我们都知道设置background-position的值如果为百分比,那么浏览器会通过一个简单的算法来计算出图片左顶点离容器左顶点的位置(也就是图片的偏移量)
比如:background-position: 50% 50%,浏览器计算x y偏移量算法分别为:
x: (容器宽度 - 图片宽度) * 50%;
y: (容器高度 - 图片高度) * 50%;
但是我需要的一个需求是:设置了background-position: 30% 0 之后,就将图片相对于容器偏移30% * 图片的宽度(也就是将图片向左移动30%长度):所以我得出了下面的方程式:
注:
x1:容器宽度
x2: 图片宽度
-x2 * 30% = (x1 - x2) * 30% * ? //(这里的百分数都是相对于图片的宽度)
(说明:30%的需求是模拟实现图片裁切,将一张图片作为div的背景,在div中再用6个div显示这一张图片,以实现图片百叶窗的效果)
通过设置未知量可以求的这个因子的值。设图片宽度为1,得到?的值为
? = 1 / (1 - x1') // x1'为容器占图片宽度的比例
最后只需要设置background-position:"30*(1/(1-x1'))% 0"
就可以实现图片偏移30%的效果,而且还是自适应的。
下面是我项目中的关于该算法的核心代码实现:
renderAreasUI : function() { //根据准备的数据构建区域ui
var container = $(this.settings.preImg).parent().find(this.settings.ui);
var num = this.settings.num;
var newImgSrc = $(this.settings.newImg).attr('src');
var position = 0;
var distance = 100 / num; //容器宽度所占图片宽度比例
for(var i = 0; i < num; i++) { //创建num个div分区域显示这一张图片
position = (i*distance)*(1/(1 - (distance / 100))) + '%' + ' ' + '0';
var area = document.createElement('div');
$(area).addClass(this.settings.area.substring(1));
$(area).css({
position: 'absolute',
top: 0,
left: (i*distance) + '%',
backgroundImage: 'url(' + newImgSrc + ')',
backgroundRepeat: 'no-repeat no-repeat',
display: 'block',
backgroundPosition: position,
backgroundSize: (100 * num) + '% 100%', //设置图片宽度为当前容器的num倍,目的是为了让每一个div都显示一部分
height: '100%',
width: distance + '%' //这里通过num设置百分比,创建num个div显示这一张图片
});
$(container).append($(area));
}
}
分享到:
相关推荐
在CSS(层叠样式表)中,背景图片的定位是一个重要的设计元素,它允许开发者将图像设置为元素的背景,并精确控制其显示位置。`background-position`属性是实现这一目标的关键,它允许我们通过坐标系统来调整背景图像...
【标题】:“color-background-源码.rar”这个标题暗示了我们即将探讨的是一个与颜色背景相关的源代码项目。在IT领域,颜色背景通常涉及到网页设计、图形用户界面(GUI)开发或者是可视化应用中的元素样式。源码则...
在JavaScript编程中,"background-anim-no-overflow:测试算法以防止背景位置数字溢出"是一个专注于实现背景动画效果的技术,旨在确保在执行动画时不会出现数字溢出的问题。这通常涉及到CSS背景图像的位置更新,以及...
"background-generator"是一个项目,可能是一个网页背景生成器工具,主要与HTML技术相关。这个工具或者库可能允许用户自定义或随机生成网页背景,从而增强网站的视觉效果和用户体验。 在HTML(超文本标记语言)中,...
- `background`:这是一个简写属性,可以一次性设置背景颜色(`background-color`)、图像(`background-image`)、位置(`background-position`)和重复方式(`background-repeat`)等。 - `background-...
- `background-position`: 设置图像在元素内的位置。 - `background-size`: 控制背景图像的尺寸。 - `background-attachment`:定义背景图像是否随滚动条移动。 - `background-origin` 和 `background-clip`:...
7. **background**: 一个简写属性,可以一次性设置所有背景属性。例如:`background: url("image.jpg") no-repeat center fixed / cover;` ### CSS表格样式 CSS提供了多种方法来美化HTML表格,使其更符合设计需求...
在网页设计和开发中,CSS(层叠样式表)是一种至关重要的技术,它允许我们对网页的布局、颜色、字体等视觉元素进行精细化控制。本文将深入探讨CSS的各种属性及其用法,帮助初学者和经验丰富的开发者更好地理解和应用...
这些函数能够从一个列表或数组中随机选择一个元素,用于选取待显示的背景图片。 3. 用户自定义: 允许用户定制图片功能意味着需要提供上传图片的接口。这可能包括选择本地图片、从相机拍摄或者从云服务导入。在...
字体属性`font`是一个简写属性,可以一次性设置`font-family`(字体家族)、`font-size`(字体大小)、`font-style`(字体风格,如斜体)、`font-variant`(小型大写)、`font-weight`(字体粗细)。例如,`font: ...
1. `background`: 这是一个简写属性,可以一次性设置背景颜色、图像、位置和重复方式等。例如,`background: #fff url('image.jpg') no-repeat center;` 将设置白色背景色,使用指定图像,并使其在中心位置不重复。 ...
- `background`:用于在一个声明中设置所有背景属性,包括颜色、图片、重复方式和位置。 - `background-attachment`:决定背景图像是否固定或随页面滚动。 - `background-color`:设置元素的背景颜色。 - `...
- `background`:这是一个简写属性,用于设置背景颜色、图像、位置和重复方式等。 - `background-attachment`:决定背景图片是否随滚动条滚动,如`fixed`(固定)或`scroll`(滚动)。 - `background-color`:...
雪碧图的基本思想是将多个小图标或背景图片整合到一张大图中,每个小图标对应大图中的一个位置。在CSS中,我们可以通过设置`background-position`属性来定位显示特定的小图标。这样,浏览器只需要加载一张大图,而...
`background`是一个简写属性,可以一次性设置所有背景属性。例如: ```css div { background: url('image.jpg') center top no-repeat fixed #ff0000; } ``` - `background-image` 设置背景图像,如`url('image....
设置为`collapse`会将相邻单元格的边框合并为一个,`separate`则保持边框分离。 - `border-spacing`属性定义了单元格之间的距离,对`border-collapse: separate`有效。 3. **背景与颜色** - `background-color`...