标签: background-position
修复IE中的背景位置
当我运行一段使用jquery和2个jquery插件的代码时,我在IE7中遇到了这个问题.该代码适用于FF3和Chrome.
完整的错误是:
Line: 33
Char: 6
Error: bg is null or not an object
Code: 0
URL: http://localhost/index2.html
然而,第33行是空白行.
我正在使用2个插件:draggable和zoom.无论我对代码做什么,总是第33行出错.我通过查看源检查源是否有更新,但我觉得这可能对我说谎.
<body>
<div id="zoom" class="zoom"></div>
<div id="draggable" class="main_internal"><img src="tiles/mapSpain-smaller.jpg" alt=""></div>
<script type="text/javascript">
$(document).ready(function() {
$('#draggable').drag();
$('#zoom').zoom({target_div:"draggable", zoom_images:new Array('tiles/mapSpain-smaller.jpg', 'tiles/mapSpain.jpg') });
});
</script>
</body>
基本上我要做的是用jQuery重新创建Pragmatic Ajax地图演示.
看来这段代码的第二行引起了麻烦:
bg = $(this).css('background-position');
if(bg.indexOf('%')>1){
它似乎试图选择背景位置属性#draggable而不是找到它？手动添加一个background-position: 0 0;没有修复它.关于如何解决这个问题的任何想法？
我尝试使用MS Script Debugger,但这几乎没用.无法检查变量或其他任何内容.
推荐指数
解决办法
查看次数
css背景位置不起作用
我有3个标签伪装成"翻转按钮".
<div id="buttons">
<a class='button' id='but1' href=''></a>
<a class='button' id='but2' href=''></a>
<a class='button' id='but3' href=''></a>
</div>
每个按钮都从CSS获取其初始图像,如下所示:
.button{
background:url(theimage.jpg);
width;height; etc...
}
现在,当我尝试为每个特定元素分配初始背景位置时:
#but1{
background-position:0 0;
}
#but1:hover{
background-position:0 -50px;
}
#but2{
background-position:0 -100px;
}
#but2:hover{
background-position:0 -150px;
}
#but3{
background-position:0 -200px;
}
#but3:hover{
background-position:0 -250px;
}
问题:每个按钮默认为位置0 0
请注意,悬停位置按预期工作.
我现在有点生病,所以这可能是一个疏忽,但我现在已经在这里待了一个小时,无法弄明白.
有什么想法吗？
谢谢
编辑 pastebin爱http://pastebin.com/SeZkjmHa
推荐指数
解决办法
查看次数
在线性渐变上使用背景位置的百分比值
有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
font-weight: bold;
width: 350px;
height: 50px;
border: 1px solid green;
transition: background 0.5s;
background-repeat: no-repeat;
background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
background-position: 0px 0px, 350px 0px;
}
.button-percentage …推荐指数
解决办法
查看次数
CSS精灵图像+背景重复它的一部分
我可以在后台重复一部分图像[它在CSS精灵图像中]吗？
例如:
background-position:-13px top; background-repeat:repeat-y;
因为我重复了整个精灵图像......
推荐指数
解决办法
查看次数
Gmail HTML电子邮件背景
我正在处理HTML电子邮件.我得到的问题是GMAIL不使用我提供的"背景位置".我有一张100%宽度的桌子,背景必须居中.大多数客户完美地做到这一点,但Gmail没有.这有解决方法吗？
内联CSS是这样的:(我已经拆分了所有的背景属性,因为否则大多数客户端都没有以正确的方式显示它)
<table style="background-repeat: no-repeat; background-position: center top;" border="0" width="100%" align="center" bgcolor="#1E1411" background="assets/mainback2.jpg">
推荐指数
解决办法
查看次数
仅限Safari的CSS3背景位置问题
以下代码在IE9,FireFox,Chrome中呈现得很好,但在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似乎没有考虑背景位置.我尝试了很多变种(比如background-position-x:right 6px),但似乎没什么用.我无法从右上角开始偏移Safari中的背景图像.
有任何想法吗？非常感谢你的时间!
推荐指数
解决办法
查看次数
在较新版本的Chrome中,SVG精灵图标背景位置显示为关闭
我正在使用background-imageSVG精灵,在我的Safari,移动版Safari,Chrome,Firefox,Opera,IE等版本上,一切看起来都不错.但是,我的一些同事的背景位置无法正确显示一个较新版本的Chrome(我知道其中一个在Mac上使用的是版本35.0.1916.153,有些在Windows上使用了不同的新版本).
这是我在所有浏览器版本中的样子:
以下是一些较新版本Chrome的外观:
HTML:
<span class="icon icon--chat"></span>
CSS:
.icon{
background:url(data:image/svg+xml;base64,[data]);
font-family:sans-serif;
background-position:top left;
background-size:cover;
display:inline-block;
width:100px;
height:100px;
padding:0;
margin:15px;
cursor:default;
}
.icon--chat{
background-position:0 4%;
}
当我把它放在JsFiddle和Codepen上时,完全相同的代码在我的同事的浏览器中正常工作,但无论如何它在这里:http://jsfiddle.net/HgR2N/
以下是我尝试过的一些没有解决问题的方法:
- 将背景图像从数据URI编码的SVG更改为常规的.svg文件
- 使用像素
background-position代替百分比 - 添加
font-family:sans-serif;(我读到某处可能会修复它 - 不知道) - 去掉边距
box-sizing:border-box;等
如果您对可能导致此问题的原因以及如何解决问题有任何疑问,请与我们联系 - 谢谢!
更新:我将我的Chrome更新到版本35.0.1916.153,所以现在我的同事和我正在使用完全相同版本的Chrome for mac,而她的混乱,我的仍然很好......
推荐指数
解决办法
查看次数
jquery动画背景位置firefox
我有这个背景图像滑块的东西在chrome和safari中工作,但它在firefox中没有做任何事情.任何帮助？
$(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(function(event){
if(event.keyCode == '39'){
left();
}
});
function left(){
if(action == 0){
action= 1;
$(image).animate({backgroundPositionX: '-='+jump+'px'}, {duration: time, easing: animation});
setTimeout(anim, time);
}
}
function right(){
if(action == 0){
action= 1;
$(image).animate({backgroundPositionX: '+='+jump+'px'}, {duration: time, easing: animation});
setTimeout(anim, time);
}
}
function anim(){
action= …推荐指数
解决办法
查看次数
CSS背景位置从右到左动画
我正在尝试为背景图像设置动画,以便图像从右到左显示.我使用的图像宽度大于背景所在的div容器的宽度.一开始,背景如下
background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;
但是当页面加载时,我希望将背景设置为动画,以使其位于左侧.这应该采取例如.2秒,只应该做一次.(图像应该在之后左侧定位).
我不想使用任何鼠标事件或伪类.有没有办法通过只使用CSS来动画它？我尝试使用关键帧找到解决方案但没有成功.
推荐指数
解决办法
查看次数
如何在图像上制作 CSS 闪光效果？
当在元素上使用时，我有以下闪光效果，效果非常好p，但它不适用于任何div元素，也不适用于img. 那么，我应该进行哪些修改才能确保闪光效果在任何元素上发挥作用。
片段如下
.shimmer {
display: inline-block;
color:grey;
background: #acacac -webkit-gradient(linear, 100% 0, 0 0, from(#acacac), color-stop(0.5, #ffffff), to(#acacac));
background-position: -50rem top; /*50px*/
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation-name: shimmer;
-webkit-animation-duration: 2.2s;
-webkit-animation-iteration-count: infinite;
-webkit-background-size: 50rem 100%; /*50px*/
font-size: 90px;
}
@-webkit-keyframes shimmer {
0% {
background-position: -50rem top; /*50px*/
}
70% {
background-position: 12.5rem top; /*200px*/
}
100% {
background-position: 12.5rem top; /*200px*/
}
}<div>
<p class="shimmer">Shimmering Text</p>
<div>
<img src="https://i.stack.imgur.com/MeQxk.png" …推荐指数
解决办法
查看次数