Question

我正在尝试让我的背景图像在鼠标光标接近视口的中心时慢慢“放大”，反之亦然。我到过Google和论坛，但我能找到的只是滚动缩放或随鼠标移动位置更改的示例。 This is the closest example I can find，但我不想更改背景位置，而是要更改背景图像比例。有人知道该怎么做或至少有什么主意吗？

这不是我正在使用的图像，但是出于本文的目的，我只是使用了Unsplash中的随机图像。这就是我背景代码的样子。

应该指出的是，我对编码还很陌生，因此，如果这是一个简单的任务，而我只是在忽略某些内容，我深表歉意。

.bg {
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: rgba(255,255,255,0.5);
		background-blend-mode: lighten;
	}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body background="https://images.unsplash.com/photo-1520531158340-44015069e78e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="bg" style="height: 100vh">
</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

鼠标光标移至中心时的背景比例

0 个答案: