标签: background-position
background-position-x(background-position-y)是标准的W3C CSS属性吗？
我很担心background-position-x和background-position-y.Gecko(Firefox)和Presto(Opera)不支持它们,但Webkit(Chrome,Safari)确实......
有没有人知道(有官方参考资料)这是否(或将会)包含在标准中？
推荐指数
解决办法
查看次数
jquery动画背景位置
我似乎无法让这个工作.
$('#product_family_options_dd').animate({
height: '300px',
width: '900px',
backgroundPosition: '-20px 0px',
},
高度和宽度有活力但不是背景.
推荐指数
解决办法
查看次数
backgroundPositionX无法在Firefox上运行
我玩过youtube的精灵动画,但是有一个问题.backgroundPositionX将无法在Firefox下运行(但适用于Chrome和IE8)...这是代码:https://jsfiddle.net/74RZb/
额外信息:问题是在firefox下它不会改变背景位置(不会播放动画)...没有错误,只是不改变背景位置.
推荐指数
解决办法
查看次数
多个背景图像定位
我有三张背景图片,全宽643px.我希望他们像这样出发:
顶部图像(12px高度)不重复
中间图像重复-y
底部图像(12px高度)没有重复
如果不让它们重叠(这是一个问题,因为图像是部分透明的),我似乎无法做到这一点,这样的事情可能吗？
background-image: url(top.png),
url(bottom.png),
url(middle.png);
background-repeat: no-repeat,
no-repeat,
repeat-y;
background-position: left 0 top -12px,
left 0 bottom -12px,
left 0 top 0;
推荐指数
解决办法
查看次数
使用jQuery更改背景位置
我想在悬停li元素时更改CSS类的背景位置.
HTML:
<div id="carousel">
<ul id="submenu">
<li>Apple</li>
<li>Orange</li>
</ul>
</div>
CSS:
#carousel {
float: left;
width: 960px;
height: 360px;
background: url(../images/carousel.png);
}
有关如何做到这一点的任何建议？
推荐指数
解决办法
查看次数
使用Css Sprites和背景位置
我有一个div元素,比如宽度为200px,高度为200px.我需要一个小图像出现在div的右上角.人们通常如何做到这一点
background: url(/images/imagepath.png) top right;
但问题是,我正在从精灵加载图像,当我使用类似的东西时
background: url(/web/images/imagepath.png) -215px -759px top right;
精灵似乎没有从正确的位置选择它.精灵的其他部分被加载.是否可以从精灵加载图像并使用background-position属性.提前致谢...
推荐指数
解决办法
查看次数
CSS后台位置无法在Mobile Safari(iPhone/iPad)中运行
我在移动游猎中遇到了背景问题.它适用于其他桌面浏览器,但不适用于iPhone或iPad.
body {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
padding: 0px;
margin: 0px;
font-family: "Arial";
}
#header {
width: 1030px;
height: 215px;
margin-left: auto;
margin-right: auto;
margin-top: 85px;
background-image: url('images/header.png');
}
#main-content {
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
background-image: url('images/content_bg.png');
background-repeat: repeat-y;
}
#footer {
width: 100%;
height: 343px;
background-image: url('images/background_bottom.png');
background-position: center;
background-repeat: no-repeat;
}
"background_top.png"和"background_bottom.png"都向左移动太远.我GOOGLE了四周,据我所知,背景,地位IS在移动Safari浏览器的支持.我也尝试了关键字的每个组合("顶部","中心"等),px和%.有什么想法吗？
谢谢!
更新:这是.html文件中的标记,它在其他浏览器中显示设计和布局:(我也更新了上面的css)
<html lang="en">
<head> …推荐指数
解决办法
查看次数
背景位置的背景大小不会缩放位置？
我有一张62张91*91像素的精灵,这使得整件事情为91*5642像素.它们以动态网格的形式显示,根据用户/指针的移动而增长和缩小.有时一个元素(标准91*91像素)放大使其为120*120像素.显然,我希望背景增长,以便在整个120*120元素中显示整个91*91像素图像.
输入background-size: 100% auto以使宽度始终完美.现在的问题是background-position期望它的值也要更新!所有62个元素都有内联style=background-position etc.我无法从内联更新背景位置.我希望背景首先定位然后调整大小(缩放),不调整大小然后定位(缩放到错误的位置).
我不确定我是否有任何意义.有点澄清:
- 所有元素都有一种风格
width: 91px; height: 91px; background-size: 100% auto;. - 第二个图像将具有内联样式
background-position: 0 -91px. - 当您悬停该元素时,它会获得一个样式
width: 120px; height: 120px;,然后它会显示第二个图像的大部分内容以及第一个图像的某些部分,因为在调整大小后会发生定位=( - 如果我将背景位置(缩放/悬停后)更改为
0 -120px,则它会正确对齐.(但显然在没有缩放/悬停时它是错误的.)
一个非常简单的解决方案是使用实际zoom: 1.3或者transform: scale(1.3),但是过渡非常慢.
我肯定错过了什么.CSS必须比这更聪明.一个背景大小的精灵......这不是不可能的!？
精灵的外观取决于我,所以我可以让它有一个120*120的网格而不是91*91,如果这样会更简单......
编辑:用例子小提琴:http://jsfiddle.net/rudiedirkx/g4RQx/
智能答案1: background-position: 0 calc(100% / 61 * 2)(61因为62张图片,2张因为第3张图片)
推荐指数
解决办法
查看次数
CSS背景渐变与偏移
我将渐变作为背景图像应用到我的身体.然后我在顶部添加了255px偏移量background-position:0 255px;.
它看起来相当不错,除了一个小问题:当然,渐变不会在页面底部结束,而是在底部255px.
是否有任何简单的方法让渐变结束于底部,但从偏移开始？
推荐指数
解决办法
查看次数
每次重复时垂直翻转背景图像
我正在寻找一种垂直重复背景图像的技巧,但每次重复图像时我都要垂直翻转它.
我在脑海里尝试了所有重复的东西,但我没有找到解决方案,甚至在谷歌搜索它.
例:
直背景图像
重复时,翻转背景图像
然后再次翻转直线
有一种获得该位置的方法吗？
只有在没有纯css的解决方案时,我才会接受JScript(及其库)中的解决方案.
谢谢你们!
推荐指数
解决办法
查看次数
标签 统计
css ×9
css3 ×3
javascript ×2
jquery ×2
animation ×1
background ×1
css-position ×1
css-sprites ×1
firefox ×1
gradient ×1
mobile ×1
safari ×1
sprite ×1