background-position | 易学教程

CSS属性之background-position的用法

阅读更多关于 CSS属性之background-position的用法

作为CSS中使用图片时会用到的属性， background-position的使用频率是很高的，它的作用就是设定某元素背景图像的初始位置。并且它有三种设定参数的方式，虽然这三种方式可以混合使用，不过我一般针对不同场景使用对应的参数设定方式。虽然官方文档上叙述了这三种方式，可是依然有些地方让我费解，特别是百分比的设定，经过实践，发现一个公式来计算需要设定的百分值，我会在后面详细阐述。关于background-position的工作原理，我的理解是将图片上需要显示出来的区域相对于元素的左上角，也就是坐标点（0,0）进行水平和垂直方向偏移。总的来说，background-position的参数设定方式是从简单到复杂，让我从简单的开始介绍：使用语义明确的单词水平方向：左（left），中(center)，右(right) 垂直方向：上（top），中(center)，下(bottom) 很明显，这种方式言简意赅，使用简洁而语义明确。 background-position: top center; // 从图片顶部开始，居中显示 background-position: top left; // 从图片顶部，靠左开始显示（左上角） background-position: top right; // 从图片顶部，靠右开始显示（右上角） background

Why can't I animate backgroundPosition past jquery 1.4.4?

阅读更多关于 Why can't I animate backgroundPosition past jquery 1.4.4?

问题 I see here that the lack of backgroundPosition animation in jquery 1.5.0 is a known bug. Has it still not been fixed? See this jsfiddle, with backgroundPosition animating in jquery 1.4.4, and then look at this one, and see that it isn't working even in jquery 1.7.1. Any idea when they're going to fix this? I'm wondering because I just saw a warning in my Chrome console saying this: event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the

CSS3 background-position issue with Safari only

阅读更多关于 CSS3 background-position issue with Safari only

问题 The following code renders well in IE9, FireFox, Chrome, but not in Safari: .search-choice { position: relative; background-clip : padding-box; background-image: url('../Design/icon_chosen_close.gif'); background-repeat: no-repeat; background-position: top 6px right 6px; } <ul class="chzn-choices"> <li class="search-choice" id="selLVB_chzn_c_0"> <span>multi1</span><a href=# class="search-choice-close" rel="0"></a> </li> </ul> Safari doesn't seem to take into account the background-position. I

Using Css Sprites and background position

阅读更多关于 Using Css Sprites and background position

问题 I have a div element, say of width 200px and height 200px. I need a small image to appear on the top right corner of the div. How one would normally do it would be with background: url(/images/imagepath.png) top right; However the problem is, I am loading the image from a sprite and when I use something like background: url(/web/images/imagepath.png) -215px -759px top right; the sprite doesnt seem to pick it from the right location. Some other part of the sprite is loaded. Is it possible to

How does CSS computation for background percentages work? [duplicate]

阅读更多关于 How does CSS computation for background percentages work? [duplicate]

问题 This question already has an answer here : Using percentage values with background-position on a linear gradient (1 answer) Closed 9 months ago . I'm currently playing around with CSS gradients and position, I kind of manage to do what I want but with lucky guesses but I'd like to understand how this actually all works. For instance, here's the French flag (merci): .serge_testDraw { width: 10rem; height: 10rem; border: 0.2rem solid black; background-image: linear-gradient(to right, blue 0%,

jQuery background-position animation

阅读更多关于 jQuery background-position animation

问题 I've created an image which is basically a CSS sprite of 3 images together. It's size is 278x123 so they are basically 3 images of 278x41. What I am trying to do is to make an animation of that by changing the background position. I've tried many things, one of my not very working solution is the following: var $slogan = $('#header h2 span'); $slogan.css({backgroundPosition: '0px 0px'}); function slogan_animation() { if ($slogan.css('background-position') == '0px 0px') { $slogan.fadeIn('slow'

CSS3 background-size and background-position issue

阅读更多关于 CSS3 background-size and background-position issue

问题 I'm programming a little WP theme and need a little help with the new CSS3 background-size property. I have a DIV which contains an image as background. The image itself is set bigger than the div to present a little cut-out of the original image: .imageContainer { background-size:154% 102%; background-position-x:-28%; background-position-y:0.28%; } So far everything is fine. But invoking the background-position property gets tricky if the size is ≥ 100%. I put together a little JS/CSS

Fix for background-position in IE

阅读更多关于 Fix for background-position in IE

问题 I get this problem in IE7 when running a piece of code that uses jquery and 2 jquery plugins. The code works in FF3 and Chrome. The full error is: Line: 33 Char: 6 Error: bg is null or not an object Code: 0 URL: http://localhost/index2.html However line 33 is a blank line. I am using 2 plugins: draggable and zoom. No matter what I do to the code it is always line 33 that is at fault. I check the source has update via view source but I feel this could be lying to me. <body> <div id="zoom"

jquery animate background-position firefox

阅读更多关于 jquery animate background-position firefox

问题 I got this background image slider thing working in chrome and safari, but it doesnt do anything in firefox. any help? $(function(){ var image= ".main-content"; var button_left= "#button_left"; var button_right= "#button_right"; var animation= "easeOutQuint"; var time= 800; var jump= 800; var action= 0; $(button_left).click(function(){ right(); }); $(button_right).click(function(){ left(); }); $(document).keydown(function(event){ if(event.keyCode == '37'){ right(); } }); $(document).keydown

jquery animate background position

阅读更多关于 jquery animate background position

问题 I can't seem to get this working. $('#product_family_options_dd').animate({ height: '300px', width: '900px', backgroundPosition: '-20px 0px', }, The height and width animate but not the background. 回答1: You don't need to use the background animate plugin if you just use separate values like this: $('.pop').animate({ 'background-position-x': '10%', 'background-position-y': '20%' }, 10000, 'linear'); 回答2: I guess it might be because it is expecting a single value? taken from the animate page on