Tag: background image

使用jQuery设置特定于浏览器的CSS属性

我正在尝试修改background-image属性中的渐变值，我不能:( data = ‘ff55dd’; $(“.el”).css({ ‘background-image’ : ‘-webkit-gradient(linear, left top, left bottom, from(#’ + data + ‘), to(#aa1133))’, ‘background-image’ : ‘-webkit-linear-gradient(#’ + data + ‘, #aa1133)’, ‘background-image’ : ‘-moz-linear-gradient(#’ + data + ‘, #aa1133)’, ‘background-image’ : ‘-o-linear-gradient(top, #ff3345, #aa1133)’, ‘background-image’ : ‘-khtml-gradient(linear, left top, left bottom, from(#’ + data + ‘), to(#aa1133))’, ‘filter’ : ‘progid:DXImageTransform.Microsoft.gradient(startColorstr=\’#’ […]

IE9提交时间CSS重绘

我们有一个动画的微调器gif，用于在用户提交表单后为提交按钮增添趣味。 如果所有validation都在表单上传递，我们通过jQuery的css()方法分配背景，将背景图像，定位和颜色设置为一体。 IE9没有在提交时显示背景图像，尽管在其他浏览器中仍然可以看到它。 这种技术在之前的IE浏览器中运行良好，但在IE9中似乎已经破解，包括旧的“浏览器模式”。 我不确定这是否是IE9中的一个错误，但它确实改变了行为，我不能相信IE7 / 8模式因为这个原因而按预期运行。 似乎IE可能决定在用户​​提交表单后不再进行重新绘制。 如果是这种情况，我不确定我是否已经解决了这个问题，但我想我认为情况并非如此。 我们在Firefox中遇到了此技术的先前问题，我们发现Firefox除了表单请求本身之外还停止所有http请求，这意味着如果背景图像不在缓存中，它将无法工作。 因此，我们已经在内存中的Image对象上预加载微调器。 有趣的是，如果我从IE开发工具控制台手动调用更新按钮上的CSS的方法，它就可以正常工作。 只有当我们有一个实际的提交时它才会被顽固并且无法在微调器中绘制。 同样有趣的是，它确实从提交按钮中删除了文本，这是效果的第二部分。 任何人有什么想法导致这个/如何预防它？ 这是一个处理提交的live() d代码的精简版本： jQuery.fn.disableSubmit = function() { this.find(“input[type=submit]”).each(function() { $(this).css({“background”: “url(/asdasdasd.gif) no-repeat 50% 50%”}); }); return this; }; $(“form”).live(“submit”, function() { var form = $(this); form.disableSubmit(); return true; });

jQuery以随机间隔将背景图像更改为几个div

我的网站上有几个显示在一起的div，每个div都有不同的背景图像。 我创建了一个脚本，以随机的时间间隔更改背景图像，然而，脚本同时更改所有图像….我希望每个图像随机更改，完全独立于另一个….我也希望它们褪色，但时机是关键问题。 这是我正在使用的脚本。 jQuery(window).load(function(){ var images = [‘images/gallery/gallery2thumb.jpg’,’images/gallery/gallery3thumb.jpg’,’images/gallery/gallery4thumb.jpg’,’images/gallery/gallery5thumb.jpg’,’images/gallery/gallery6thumb.jpg’,’images/gallery/gallery7thumb.jpg’,’images/gallery/gallery8thumb.jpg’,’images/gallery/gallery9thumb.jpg’,]; var i = 0; var timeoutVar; function changeBackground() { clearTimeout(timeoutVar); // just to be sure it will run only once at a time jQuery(‘.hexagon-in2.change’).css(‘background-image’, function() { if (i >= images.length) { i=0; } return ‘url(‘ + images[i++] + ‘)’; }); timeoutVar = setTimeout(changeBackground, ( 300+Math.floor(Math.random() * 1700) […]

使用fadeIn（）循环显示背景图像

我正在制作一个带有一些视差图像的响应式网站，第一个图像是一个循环图像，就像一个图像滑块。 我正在使用jquery Cool小猫的响应能力。 我加载的相关jquery插件是： div的css是： #slide2 { background-image:url(../images/darkmap.png); height:700px; } 我发现在这种布局中使用HTML图像作为背景可能会有问题，这就是我通过使用数组避免这种情况的原因： var imageIndex = 0; var imagesArray = [ “images/photo1.png”, “images/photo2.png”, “images/photo3.png” ]; 我有一个包含在$(document).ready()函数中的代码，它将css背景更改为数组，然后循环遍历数组，我添加了fadeIn()以实现平滑过渡： function changeImage(){ var index = imageIndex++ % imagesArray.length; $(“#slide2”).css(“background”,”url(‘”+ imagesArray[index] +”‘)”); } setInterval(changeImage, 5000); changeImage.fadeIn(); 图像循环工作正常，但由于某种原因fadeIn()不起作用，它只是从一个图像闪烁到另一个图像。 有人可以告诉我我错过了什么吗？

使用jQuery设置背景图像只会更改背景一次

我正在尝试根据变量的值设置一个元素的background-image属性。 它只是第一次工作。 当我切换到准备状态时，背景图像停止变化。 图像本身很小 – 大约8-10 kB。 这是我的代码： if(status != ”) { console.log(‘status’); console.log(status); switch(status) { case ‘dev’: $(‘#status’).css(‘background-position’,’0px -160px’); break; case ‘ready’: $(‘#status’).css(‘background-position’,’0px -240px’); break; case ‘soon’: $(‘#status’).css(‘background-position’,’0px 0px’); break; case ‘design’: $(‘#status’).css(‘background-position’,’0px -80px’); break; } } 这里有元素的CSS： #status { z-index: 1; float: right; height: 80px; width: 80px; background: url(/images/front/status-sprite.png); background-position: 0px -160px; margin: […]

如何使背景图像可点击（javascript或css）

请看看这个小提琴 如何使背景图像可点击？ 点击“参加调查”将转到新页面。 By default, the background-image property repeats an image both horizontally and vertically. Javascript或CSS都是首选。 编辑：我不想使用图像浮动到右上角。

HTML 5文件加载图像作为背景图像

是否可以通过HTML 5 File API加载图像并使用javascript / jquery使其成为css背景图像？ 如果有可能，它是如何完成的？

CSS背景位置从右到左动画

我正在尝试为背景图像设置动画，以便图像从右到左显示。 我使用的图像宽度大于背景所在的div容器的宽度。 一开始，背景如下 background: url(../img/zeppelin.png); background-repeat: no-repeat; background-position: right; 但是当页面加载时，我想要对背景进行动画处理，使其位于左侧。 这应该采取例如。 2秒，只应该做一次。 （图像应该在之后左侧定位）。 我不想使用任何鼠标事件或伪类。 有没有办法通过只使用CSS来动画它？ 我尝试使用关键帧找到解决方案但没有成功。

通过jquery更改webkit-slider-thumb的背景图片

我搜索了一会儿，但找不到任何有用的东西。我有以下的CSS input[type=”range”]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 10px; background-image: url(‘http://sofzh.miximages.com/javascript/smiley.png’), -webkit-gradient( linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) ); background-size:20px; background-repeat: no-repeat; } 现在我想通过jquery或普通javascript的帮助将背景图像更改为其他图像src，我可以从chrome console测试。所以我有类似的东西： `background-image: url(‘http://sofzh.miximages.com/javascript/test.png’),` 任何人都可以提到正确的语法。 感谢您的好评。

获取背景图像的最终大小

有没有一种简单的方法可以使用Javascript或jQuery获取背景图像的最终高度和宽度，即使应用了background-size属性？ 我的意思是，我知道我可以获取背景图像URL并将其加载到Image对象，然后获取宽度和高度。 但它是源图像的大小。 如果有人用CSS缩放它，那么大小就会改变 我怎样才能找到它的最终尺寸？ @编辑 它与标记为类似的问题不同，因为它没有说如果有人改变了background-size大小，如何获得像素background-size