Question

所以我希望获得类似以下提货页面的效果： https://www.goodboydigital.com/ 我有我的背景图像，我可以实现像那样的三维悬停，但问题是，我不能让我的背景更大，所以当你旋转时你可以看到outRefEnd的边缘。我我会欣赏一些关于如何使背景更大的帮助，我已经尝试过像div这样的值，但它只会在图像的左下角变大，放大，所以我仍然可以看到边缘

＆＃13;

w:150vw, h:150vh

＆＃13;

var banana = $(".background-section-1");

		$(document).on("mousemove",function(e) {  
		  var ax = -($(window).innerWidth()/2- e.pageX)/20;
		  var ay = ($(window).innerHeight()/2- e.pageY)/10;
		  banana.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");
		});

＆＃13;

 body{
   overflow:hidden;
 }

	.background-section-1{
		position:absolute;
		height:100vh;
		width:100vw;
		background: url('https://images.pexels.com/photos/401685/pexels-photo-401685.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
		z-index:7;
		background-size:cover;
		border:1px solid white;
	}
  
  .section-inicio{
		position:absolute;
		left:0%;
		top:0%;
		z-index:10;
	}

＆＃13;

这里有代码https://jsfiddle.net/haofrp0a/6/

Answer 1

我只是添加了background-size: cover;。如果你不这样做，你的图像将保持相同的尺寸，甚至更难你改变宽度或高度。

使用JSFiddle：https://jsfiddle.net/e7gmwtww/

＆＃13;

var banana = $(".background-section-1");

		$(document).on("mousemove",function(e) {  
		  var ax = -($(window).innerWidth()/2- e.pageX)/20;
		  var ay = ($(window).innerHeight()/2- e.pageY)/10;
		  banana.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");
		});

＆＃13;

body{
   overflow:hidden;
 }
 .section-heading-main{
		text-align:center;
		white-space:normal;
		padding-top:15vh;
		margin:auto;
		font-size:10vh;
		font-weight:bold;
		z-index:9;
	}

	.site-logo{
		max-width:30vh;
		max-height:30vh;
		text-align:center;
		margin:auto;
		z-index:9;
	}

	.background-section-1{
		position:absolute;
		height:100vh;
		width:100vw;
		background: url('https://images.pexels.com/photos/401685/pexels-photo-401685.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
        background-size: cover;
		z-index:7;
		
		border:1px solid white;
	}

＆＃13;

<div id="section1" class="section section-inicio">
		<div class="row">
			<div class="background-section-1 anm-linear"></div>
			<div class="col-md-12 section-heading-main">
      This is where the content goes
			</div>
		</div>
	</div>

＆＃13;

Answer 2

我可以通过向背景div添加负顶部和左侧定位来解决问题，同时扩展它的大小，解决方案的唯一问题是它缩放图像，但因为在我的原始代码中我使用几何模式它不会影响很多。

  .background-section-1{
		position:absolute;
	top:-10vh;
	left:-10vw;
	height:120vh;
	width:120vw;
		background: url('svg01.svg');
		z-index:7;
		background-size:cover;
		border:1px solid white;
	}



	.section-inicio{
		position:absolute;
		left:0%;
		top:0%;
		z-index:10;
	}

这是工作小提琴https://jsfiddle.net/haofrp0a/7/

使div背景比所有边都大

2 个答案: