Question

因此，我彼此之间有两次潜水，我想将2张背景图像对齐。两个图像的相同，但高度不同。（第二张图片应重复instelf（理想情况下，使用可在滚动时加载它的JavaScript）。

所以我能够对齐图像，但是缩放是有问题的（现在固定大小）。

有人知道怎么做吗？

到目前为止，这是我的代码

@extends('layouts.application')

@section('styles')

<style type="text/css">

	.bgimage{
		background-image: url('{{ asset('/images/bg/logo.png') }}');
		background-attachment: fixed;
		position: relative;
    	background-position: left;
		background-position: left;
		top: 0;
		left: 0;
		background-color: white;
		width: 100%;
		height: 100vh;
	}

	.image {
		background-image: url('{{ asset('/images/bg/stripe.png') }}');
		background-attachment: fixed;
		position: relative;
    	background-position: left;
		background-repeat: repeat;
		top: 0;
		left: 0;
		background-position: left;
		background-color: white;
		width: 100%;
		height: 50vh;


	}

</style>

@endsection

@section('layout-content')

<div class="bgimage" > </div>
<div class="image"> </div>

<!--/End Footer -->

@endsection

@section('scripts')
 

@endsection

感谢分配

Answer 1

我不确定我是否完全满足要求，但这是一个尝试：

https://jsfiddle.net/wkjys4cu/1/

.outer-container {width: 900px;position: relative;}
.box {
  width: 50%;
  height: 250px; 
  background-image: url('https://www.w3schools.com/cssref/img_tree.gif');
  background-repeat: no-repeat;
  position: absolute; 
  top: 0; 
  left: 0;
}

.box1 {
  outline: 1px solid black;
  background-size: 50% 50%;
  background-position: 50% 60%;
}

.box2 {
  outline: 1px solid red;
  background-size: 50% 75%;
  background-position: 20% 80%;
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
  <div class="outer-container">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>
</body>
</html>

css在单独的div中对齐两个背景图像

1 个答案: