Tag: 背景

如何将CSS background-position属性从百分比转换为像素?

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

带有jquery的目录中的随机图像选择器

即时通讯使用jquery.min。 function LoadImages() { 我曾尝试使用jasper roos winkel jquery插件来做到这一点,但它不一定满足我的需求: http://www.jasperrooswinkel.com/smooth-fullscreen-background-slideshow-in-jquery/ 这是我的问题: 我的网络服务器上有一个包含数千张图像的文件夹。 我想要一个带有jquery的动态背景转换器。 这将从该文件夹中随机选择每5秒一个图像并将其放到后台。 我怎样才能做到这一点? 等待你的帮助。

如何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解决方案。

整页背景图像可resize – 保持宽高比

我需要一个简单的jquery解决方案来将背景图像添加到我的页面中,完全填充它,但保持纵横比和垂直和水平居中位置。 这里有几个插件,但我不想使用任何插件。 提前致谢。

jquery循环通过不同的背景

我试图改变不同的背景,通过一个图像arrays循环div,并每5秒计时一次。 这是我的代码: function changeBG(){ //array of backgrounds var array = [“test.jpg”, “test2.jpg”, “test3.jpg”,]; for ( var i=0, len=array.length; i<len; ++i){ $('.round-mask').css('background-image', 'url("images/work/'+array[i]+'")'); } } window.setInterval(changeBG(), 5000); 这不起作用,我可以看到它正在循环,但我总是得到第三张图像。 任何的想法? 提前致谢。 毛罗

MSfilter添加了jquery

我正在研究一个项目,其中一项任务是使背景静态并覆盖整个页面。 关于这个我找到了这个教程 ,使用“很棒,简单,渐进的CSS3方式”。 我的问题是我有更多的页面,每个页面都有不同的背景,所以我必须将背景图像放在如下所示: (也就是css样式放在 ,而不是放在“html”上,就像在例子中一样) 正如您在该链接中看到的,IE有filter,如下所示: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’.**myBackground.jpg**’, sizingMethod=’scale’); -ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’**myBackground.jpg**’, sizingMethod=’scale’)”; 问题是“myBackground.jpg”取自标签,正如我上面所写,因此我不能直接在css中编写(每个页面都有不同的背景)。 有没有办法使用jQuery添加这些filter? 我成功地从body中获取了图像的路径,因此我只需要将其粘贴到此代码中,然后使用jQuery for IE <= 8添加。 谢谢你的回答,跟着他们我成功解决了我的问题。 所以,如果有人想要代码: $(function(){ var mu = $.browser; if (mu.msie && mu.version < 9) { var curBg = $('html').attr('style'); curBg = curBg.split('('); curBg = curBg[1].split(')'); $('html').css({ "filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+curBg[0]+"', sizingMethod='scale')", "-ms-filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+curBg[0]+"', sizingMethod='scale')" }); } […]

移动video背景鼠标滚动

你看过Katy Perry的网站吗? 这很棒(我很认真,没有垃圾邮件)! 它有一个移动的背景video,我无法弄清楚他们实现它的方式。 这是主页: Home 当你开始向下滚动时,背景图像(实际上是video)开始播放。 我设法弄清楚这是video本身, http://www.katyperry.com/wp-content/themes/katyperry-2/library/video/KATY_BG_21.mp4 并且垂直滚动会移动video滑块。 我似乎无法弄清楚他们是如何做到这一点的,这让我很生气(花了很多时间试图逆向工程) 有任何想法吗? 你以前做过/看过这样的事吗? 在此先感谢,Zsolt

如何懒惰加载div背景图像

正如你们许多人所知,它被广泛用于延迟加载图像。 现在我想用它作为延迟加载div背景图像。 我怎样才能做到这一点 ? 我目前能够使用http://www.appelsiini.net/projects/lazyload这个插件 所以我需要以与div背景一起使用的方式修改它 需要帮忙。 谢谢。 下面我想假装延迟加载图像 $self.one(“appear”, function() { if (!this.loaded) { if (settings.appear) { var elements_left = elements.length; settings.appear.call(self, elements_left, settings); } $(“”) .bind(“load”, function() { $self .hide() .attr(“src”, $self.data(settings.data_attribute)) [settings.effect](settings.effect_speed); self.loaded = true; /* Remove image from array so it is not looped next time. */ var temp = $.grep(elements, […]

根据页面位置更改背景颜色

我想要根据滚动更改背景颜色。 红色到蓝色例如…… 此代码有效,但如何将灰色更改为颜色? http://fiddle.jshell.net/schmudde/ffk6phq0/ $(document).ready(function(){ $(document).scroll(function() { var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop() / 210, 0.9); var channel = Math.round(alpha * 255); $(“body”).css(‘background-color’, ‘rgb(‘ + channel + ‘,’ + channel + ‘,’ + channel + ‘)’); }); });

从HTML5 Canvas中的图像中删除背景颜色

我正试图从加载到HTML5 Canvas中的照片图像中去除背景。 想想绿屏效果。 我正在使用HTML / JS / jQuery 照片的背景将是例如绿色窗帘。 由于照明等原因,窗帘的颜色不会精确。 我现在正在做的是抓取用户在Canvas中点击的像素的RGB值。 那被认为是背景。 我添加该像素的R + G + B来设置被视为背景的东西。 然后,我逐个像素地浏览canvas,检查像素是否接近设置为背景的RGB值(例如,在50以上或以下)。 如果匹配,我将像素更改为canvas内的透明。 这可以很好地作为概念certificate,但不足以做任何事情。 有没有人对背景减法有更好的想法? 干杯!