Tag: 背景图像

在hover时向背景图像添加淡入和淡出过渡: 我在页面的侧边栏中有一个简单的导航系统，你可以在这里看到。正如您可以看到当您将鼠标hover在侧边栏中的一个链接上时，背景图像会发生变化，因为我已在CSS中设置了不同的背景URL以hover。我正在寻找一种添加过渡效果的简单方法，以便hover背景图像淡入淡出。我尝试了几种jQuery方法但没有成功。我想知道是否有一种方法可以使用jQuery或其他方法向后台URL图像添加淡入淡出过渡，或者是否必须使用其他方法来获得过渡效果。谢谢，缺口

滚动背景更改正在闪烁: 我试图让我的页面上的“滚动背景图像更改”。但滚动时的变化是闪烁的。我在其他线程中找不到解决方案。这就是我所拥有的： jQuery的： $(function(){ $(document).scroll(function () { if ($(this).scrollTop() > 1) { $(‘body’).css({ backgroundImage: ‘url(“img/picture1.jpg”)’ }); } if ($(this).scrollTop() > 800) { $(‘body’).css({ backgroundImage: ‘url(“img/picture2.jpg”)’ }); } CSS： body { background: url(‘../img/picture1.jpg’); background-repeat:no-repeat; background-attachment:fixed; background-size:cover; }

使用jquery为backgroundImage隐藏或显示none: $(‘.arrow’).backgroundImage=”url(‘../img/arrow.png’).style.display = ‘none'”; 我正在使用animate.css插件向下滚动隐藏向下箭头。 `$( document ).ready(function() { console.log( “ready!” ); $(“h1″).animate({color:”#ffffff”}, 600); $(‘.arrow’).backgroundImage=”url(‘../img/arrow.png’)”;` if (direction == “up”) { $(“h1″).animate({color:”#ffffff”}, 600); $(‘.arrow’).backgroundImage=”url(‘../img/arrow.png’)”; } else if (direction == “down”) { $(“h1″).animate({color:”#444444″}, 600); $(‘.arrow’).backgroundImage=”url(‘../img/arrow.png’).style.display = ‘none'”; 箭头不起作用。我的function写得不正确吗？如何隐藏backgroundImage？有没有更好/更有效的方法来解决这个问题？

如何加载html文本，直到加载背景图像精灵？: 这是我想用jQuery控制的一些示例代码（黑页bg上的白色按钮bg）： Products and Services for the company Successful packaging services for the company Data, mail and print tools for your company 在CSS文件中，我有以下内容： .buttons li { background-image: url(images/sprite.png); height:126px; width:293px; float:left; margin:0 0 0 9px; } .button-displays { background-position: 0 125px; } .button-packaging { background-position: 0 250px; } .button-tools { background-position: 0 375px; } 我将这些列表项设置为看起来像可点击的按钮，背景精灵有助于填写按钮的背景。我的客户端在Firefox和Safari中不喜欢它，当页面第一次加载时，锚点内的文本首先加载li的背景精灵（大约150kb […]

滚动时淡入新的背景图像: 当用户向下滚动页面时，我正在尝试将背景图像设置为fadeIn / fadeOut。从长远来看，我正在使用几张背景图像拍摄时间流逝效果。我已经在滚动时改变了背景图像，但我似乎无法让它们从一个到另一个渐渐消失。这是我到目前为止所得到的 – jsFiddle $(document).scroll(function () { if ($(this).scrollTop() > 1) { $(‘body’).css({ backgroundImage: ‘url(“http://sofzh.miximages.com/jquery/sun1_web.png”)’ }); } if ($(this).scrollTop() > 250) { $(‘body’).css({ backgroundImage: ‘url(“http://sofzh.miximages.com/jquery/sun2_web.png”)’ }); } if ($(this).scrollTop() > 500) { $(‘body’).css({ backgroundImage: ‘url(“http://sofzh.miximages.com/jquery/sun3_web.png”)’ }); } if ($(this).scrollTop() > 750) { $(‘body’).css({ backgroundImage: ‘url(“http://sofzh.miximages.com/jquery/sun4_web.png”)’ }); } });

如何将CSS background-position属性从百分比转换为像素？: 我现在正在以背景为中心（使用background-position: 50% 50%; ），我想使用Javascript进行动画制作。但是，我希望能够使用像素测量来制作动画。实际上，我想将背景位置设置为“50％+ 10px”。这可能使用Javascript吗？我可以通过找到背景图像的高度和浏览器屏幕的高度并做一些算术来做到这一点，但这似乎是一个复杂的解决方案。

如何inheritance祖父母CSS而不是父？: 我觉得这是不可能的，但我想我还是会问。 //body uses ‘back’ background //div1 uses ‘front’ background //child1: no backgrounds, so shows ‘front’ background 我的body元素使用背景图像。（我称之为背景背景图片） div1使用不同的背景图像（我将其称为front背景图像），因此front背景图像覆盖主背景图像。 div1包含一个不使用任何背景图像的子div child1 ，因此它只显示其父级的背景图像，即它显示front背景。我希望child1使用body的背景而不是其父div1的背景。由于背景背景的本质（它是绘图，而不是重复的图案），我不能只将背景图像应用于child1 。我实际上需要一种方法在div1的背景中创建一个洞，以便child1将back背景图像作为其背景，而不是其父级的背景。所以我的问题是：div有没有办法inheritance祖父母的背景，而不是父母的背景？如果使用CSS无法做到这一点，我会接受javascript解决方案。

如何validation后台（css）图像已加载？: 我有以下CSS类 .bg { background-image: url(‘bg.jpg’); display: none; } 我正在申请TD标签。我的问题是如何用JavaScript / jQuery告诉背景图像是否已完成加载？谢谢。更新：添加了显示属性。由于我的主要目标是将其切换到视图中。

jquery简单动画/旋转css背景图像在div内？: 我想知道是否有人可以帮助我，或指出我正确的方向。我正在寻找一个jquery片段，它会自动改变一个div的背景图像，每个说5秒左右。我的初始bg图像是在css中设置的，但我不确定如何创建函数使其在图像数组之间交换？我有5张图片： bg-1.jpg，bg-2.jpg，bg-3.jpg，bg-4.jpg，bg-5.jpg。目前我的div设置为bg-1.jpg。真的没有任何代码可以显示，但希望有人可以帮助我:)

jQuery – 可以将背景图像调整为设定大小吗？: 我正处于这样一种情况，我迫切需要将div的背景图像调整到一定的大小。有谁知道这是否可以使用jQuery？我知道它需要的大小，它不必调整div的大小。 35,000张图片已缩放到错误的尺寸，需要上线，因此调整图像大小不是一个选项！任何建议赞赏！编辑：我只是看看我们是否能够改变HTML以从DIV中取出背景图像并将其放在一个单独的绝对定位的div中，同时带有IMG标签… IMG标签可以然后用CSSresize。