Question

这是我的网站：www.wostokhr.pl

在“div id =”hero“我有图片”pics / hero.jpg“用JS视差函数。我不知道，为什么这张图片没有出现.HTML和CSS验证器没有显示任何错误。图片的名称和路径是正确的。有任何想法如何修复它？

演示：

Answer 1

我建议您不要使用data-image-src="pics/hero.jpg"，而是使用CSS将background-image属性设置为pics/hero.jpg路径。

为此，只需添加：

.hero { background-image: url("pics/hero.jpg"); }

进入你的CSS文件，这将使div类hero具有hero.jpg的背景图像。

希望这有帮助！

Answer 2

进行以下更改

对于HTML

<div class="parallax-mirror" style="z-index: 0 !important">
    <img class="parallax-slider" src="http://www.wostokhr.pl/pics/hero.jpg">
</div>

对于Css

.parallax-slider{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

对于JS

var strength3 = 200;
    $("html").mousemove(function(e){
        var pageX = e.pageX - ($(window).width() / 2);
        var pageY = e.pageY - ($(window).height() / 2);
        var newvalueX = 1* pageX * -1;
        var newvalueY = 1* pageY * -1;
        $('.parallax-slider').css("left", (strength3 / $(window).width() * pageX * -1)+"px ");
    });

Answer 3

您只能在z-index: -100;

中将z-index: 0;更改为class="parallax-mirror" 你的视差正在发挥作用。

图片没有显示

3 个答案: