时间戳

首页 > 解决方案 > CSS-HTML：使用 html 和 css 将图像放在另一个图像之上

javascript - CSS-HTML：使用 html 和 css 将图像放在另一个图像之上

问题描述

我是 webdev 的新手，但我需要起草一个带有一些技巧效果的登录页面。我需要在移动（鼠标悬停）背景上放置一个“模板图像”（带有 transp 的 png）。基本上，我设法做到了，但我遇到了一个大问题：如果我调整浏览器的大小，背景会显示在第一个平面图像的后面，（因为我无法将背景调整为浏览器大小）。所以，主要代码是：

html代码：

<div id="bkg-image" class="blur"></div> 

<div>
<img  src="./imgs/stencil.png" class="firstPlane" />

</div>

CSS 代码：

#bkg-image {
    background: url('./imgs/background.jpg') no-repeat center center fixed;
    position: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 75%;
    height: 75%;
    z-index: 0;
    -webkit-filter: brightness(1.7);
}

.firstPlane {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: 100%;
    height: auto;
    width: auto;
    z-index: 2;
}

JS代码：

$(document).ready(function() {
    var movementStrength = 75;
    var height = movementStrength / $(window).height();
    var width = movementStrength / $(window).width();
    $(".firstPlane").mousemove(function(e) {
        var pageX = e.pageX - ($(window).width() / 2);
        var pageY = e.pageY - ($(window).height() / 2);
        var newvalueX = width * pageX * -1;
        var newvalueY = height * pageY * -1;
        $('#bkg-image').css("background-position", newvalueX + "px     " + newvalueY + "px");
    });
});

知道如何裁剪多余的背景或如何重新缩放以适合第一平面图像吗？

注意： blur 类仅用于动画模糊效果，与此无关。我从网络教程中获取了java脚本。

我的第一个方法是使用 webkit mask-image，但发现它不起作用，现在我正在尝试这种方法。

非常感谢您的帮助

标签： javascripthtmlcss

解决方案

我需要反转选择：我需要读取第一个平面上的鼠标位置并将移动应用于 bkg 图像。（您的脚本仅在我切换 #bkg-image 和 .firstPlane 时才有效）。我的问题不是读取运动，而是当我有一个又小又高的浏览器窗口时，裁剪 bkg-image 以使其不显示在第一个平面下方。

解决方案是蒙版/剪辑图像，但它不适用于 svg 图形或 PNG 对我来说，所以我放弃并尝试使用带有 transp 的黑色大 PNG 来显示背景。像这样的东西：(https://codepen.io/caraujo/pen/rVOZKJ)但带有徽标（矢量或 png），但蒙版/图像剪辑不适用于我：/

推荐阅读