CSS/Javascript is not my strong point so I would like to ask if is possible to change the background-image opacity to, let's say, 0.5.
CSS / Javascript不是我的强项,所以我想问一下是否可以将背景图像的不透明度改为0.5,比方说,0.5。
I have a div with
我有一个div
background-image: url(images/nacho312.png);
background-position: -50px 0px;
background-repeat: no-repeat no-repeat;
but when I load a certain view it does not look very good, so I want to have a "half-disolve" effect when that view is shown. Is it possible?
但是当我加载某个视图时它看起来不太好,所以当显示该视图时我希望有一个“半解析”效果。可能吗?
Thanks
3 个解决方案
#1
4
Here is a start.
这是一个开始。
var element = document.getElementById('hello'),
targetOpacity = 0.5,
currentOpacity,
interval = false,
interval = setInterval(function() {
currentOpacity = element.getComputedStyle('opacity');
if (currentOpacity > targetOpacity) {
currentOpacity -= 0.1;
element.style.opacity = currentOpacity;
} else {
clearInterval(interval);
}
}, 100);
在jsFiddle上看到它。
Run this on window.onload = function() { }
or research cross browser on DOM ready events.
在window.onload = function(){}上运行此命令,或在DOM ready事件上研究跨浏览器。
Of course, it is much easier with a library like jQuery.
当然,使用像jQuery这样的库要容易得多。
$(function() {
$('hello').fadeTo('slow', 0.5);
});
This relies on your container's children inheriting the opacity. To do it without affecting them is a bit of a pain, as you can't reset children's opacity via opacity: 1
.
这依赖于容器的子容继承不透明度。要做到这一点而不影响他们有点痛苦,因为你不能通过不透明度重置孩子的不透明度:1。
#2
3
If you want to animate smoothly and without doing too much extra work - this is a good task for jQuery (or another, similar library).
如果你想要平滑地制作动画而不需要做太多的额外工作 - 这对于jQuery(或其他类似的库)来说是一个很好的任务。
With jQuery you could do:
使用jQuery,您可以:
$('#id_of_div').fadeTo('fast', 0.5);
To get a fast animated fade effect on the relevant DIV.
在相关DIV上获得快速动画淡入淡出效果。
Update: if you want to actually fade the background image, but not any foreground contents of the DIV, this is a lot harder. I'd recommend using one container DIV with position:relative and two inner DIVs with position:absolute; . The first of the inner DIVs can have the background image and a lower z-index than the second of the DIVs, and the second DIV would contain any text, etc. to show in foreground. When needed you can call $('#id_of_first_div').fadeTo('fast', 0.5);
to fade just the DIV containing the background image.
更新:如果你想实际淡化背景图像,但不是DIV的任何前景内容,这要困难得多。我建议使用一个容器DIV,其位置为:relative和两个内部DIV,其位置为:absolute; 。第一个内部DIV可以具有背景图像和比第二个DIV更低的z-index,第二个DIV将包含任何文本等,以显示在前景中。需要时你可以调用$('#id_of_first_div')。fadeTo('fast',0.5);仅淡化包含背景图像的DIV。
By the way, the literal answer to your question is "No, you cannot animate the opacity of a CSS background image" - you can only (currently) animate the opacity of a DOM element, not its attributes, thus the need for the above hack.
顺便说一句,你的问题的字面答案是“不,你不能动画CSS背景图像的不透明度” - 你只能(当前)动画DOM元素的不透明度,而不是它的属性,因此需要上面的黑客攻击。
Other Update: if you want to avoid using any third-party library, you can handle the fade of the background DIV using approach in Alex's answer.
其他更新:如果您想避免使用任何第三方库,您可以使用Alex的答案处理背景DIV的淡入淡出。
#3
1
background-image: url(images/nacho312.png);
background-position: -50px 0px;
background-repeat: no-repeat no-repeat;
opacity:0.5; //for firefox and chrome
filter:alpha(opacity=50); //for IE
#1
4
Here is a start.
这是一个开始。
var element = document.getElementById('hello'),
targetOpacity = 0.5,
currentOpacity,
interval = false,
interval = setInterval(function() {
currentOpacity = element.getComputedStyle('opacity');
if (currentOpacity > targetOpacity) {
currentOpacity -= 0.1;
element.style.opacity = currentOpacity;
} else {
clearInterval(interval);
}
}, 100);
在jsFiddle上看到它。
Run this on window.onload = function() { }
or research cross browser on DOM ready events.
在window.onload = function(){}上运行此命令,或在DOM ready事件上研究跨浏览器。
Of course, it is much easier with a library like jQuery.
当然,使用像jQuery这样的库要容易得多。
$(function() {
$('hello').fadeTo('slow', 0.5);
});
This relies on your container's children inheriting the opacity. To do it without affecting them is a bit of a pain, as you can't reset children's opacity via opacity: 1
.
这依赖于容器的子容继承不透明度。要做到这一点而不影响他们有点痛苦,因为你不能通过不透明度重置孩子的不透明度:1。
#2
3
If you want to animate smoothly and without doing too much extra work - this is a good task for jQuery (or another, similar library).
如果你想要平滑地制作动画而不需要做太多的额外工作 - 这对于jQuery(或其他类似的库)来说是一个很好的任务。
With jQuery you could do:
使用jQuery,您可以:
$('#id_of_div').fadeTo('fast', 0.5);
To get a fast animated fade effect on the relevant DIV.
在相关DIV上获得快速动画淡入淡出效果。
Update: if you want to actually fade the background image, but not any foreground contents of the DIV, this is a lot harder. I'd recommend using one container DIV with position:relative and two inner DIVs with position:absolute; . The first of the inner DIVs can have the background image and a lower z-index than the second of the DIVs, and the second DIV would contain any text, etc. to show in foreground. When needed you can call $('#id_of_first_div').fadeTo('fast', 0.5);
to fade just the DIV containing the background image.
更新:如果你想实际淡化背景图像,但不是DIV的任何前景内容,这要困难得多。我建议使用一个容器DIV,其位置为:relative和两个内部DIV,其位置为:absolute; 。第一个内部DIV可以具有背景图像和比第二个DIV更低的z-index,第二个DIV将包含任何文本等,以显示在前景中。需要时你可以调用$('#id_of_first_div')。fadeTo('fast',0.5);仅淡化包含背景图像的DIV。
By the way, the literal answer to your question is "No, you cannot animate the opacity of a CSS background image" - you can only (currently) animate the opacity of a DOM element, not its attributes, thus the need for the above hack.
顺便说一句,你的问题的字面答案是“不,你不能动画CSS背景图像的不透明度” - 你只能(当前)动画DOM元素的不透明度,而不是它的属性,因此需要上面的黑客攻击。
Other Update: if you want to avoid using any third-party library, you can handle the fade of the background DIV using approach in Alex's answer.
其他更新:如果您想避免使用任何第三方库,您可以使用Alex的答案处理背景DIV的淡入淡出。
#3
1
background-image: url(images/nacho312.png);
background-position: -50px 0px;
background-repeat: no-repeat no-repeat;
opacity:0.5; //for firefox and chrome
filter:alpha(opacity=50); //for IE