Question

我认为我有一项不可能完成的任务，但在放弃之前我想确定它真的不可能。也许数以百万计的媒体查询可能，但这不值得斗争。

但是，我有一个高度为100vh的backgroundimage，这意味着它始终是用户窗口的100％高度，宽度为100％。这两件事可能使我的任务变得不可能。

在背景图像中，我有另一张图像，无论如何都应该在该位置。

我想出了一个例子。我希望火箭始终留在这个星球上的那个矩形上。我在屏幕上实现了这一点，但由于屏幕尺寸不同，它可能会在屏幕上滑动。

（stackoverflow不允许带有http的图片，所以请将图片src更改为http或查看我的codepen：https://codepen.io/anon/pen/yjXbPL）

＆＃13;

.background {
  background-repeat: no-repeat;
  background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
  background-size: cover;
  background-position: center center;
  height: 100vh;
  width: 100%;
}

img {
  width: 150px;
  position: fixed;
  top: 240px;
  right: 780px;
  transform: rotate(-20deg)
}

＆＃13;

<div class="background">
  <img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>

＆＃13;

这可能吗？

Answer 1

使用固定的位置。使用左和上，而不是右。将图像放在背景div旁边。

Answer 2

我没有使用图像作为背景，而是使用了火箭放置在顶部的内联图像。然后火箭和背景相互作出反应。

＆＃13;

.background {
  position: relative;
}
.background img {
  max-width: 100%;
  display: block;
}
#rocket {
  top: 49%;
  left: 47%;
  width: 15%;
  height: 15%;
  background-image: url(http://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  transform: rotate(-20deg)
}

＆＃13;

<div class="background">
  <img src="https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg">
  <div id="rocket"></div>
</div>

＆＃13;

Answer 3

附加的codesnippet显示了一个解决方案。它是基于你将你的火箭和背景放在两个不同的div中并使用CSS-index堆叠它们。此外，火箭定位固定，我添加了背景的高度，使其有点可滚动。

现在，要解决火箭和背景图像的图形分割，您必须将它们创建为2个不同的图像，并将它们放入HTML中的每个相应div中（参见codesnippet）。

在使用不同的设备方面，你必须测试火箭如何改变位置并通过媒体查询的组合来解决这个问题，并且可能使用％位置代替px（以确定火箭的正确位置）：

＆＃13;

.background-pic {
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 1000px;
  background-color: darkblue;
}

.rocket {
  position: fixed;
  z-index: 2;
  width: 50px;
  height: 50px;
  background-color: orange;
  margin: 100px 0px 0px 100px;
}

＆＃13;

<div class="background-pic"></div>
<div class="rocket"></div>

＆＃13;

Answer 4

在某种程度上，它是可能的。这是我的解决方案，我已经尝试并测试了您的代码。这些是修改代码的更改：

将图像的位置设置为fixed：

img
{
      width: 150px;
      position: fixed;
      top: 50%;
      margin-top: 20px; (adjust some pixels as per your need)
      right: 50%;
      margin-right: -90px;(adjust some pixel as per your need)
      transform: rotate(-20deg)
}

以下是完整的工作示例： https://codepen.io/atulraj89/pen/MGooLr

Answer 5

这可能真的难以实现的原因是因为您正在使用background-size: cover;这意味着在保持其纵横比的同时拉伸图像并裁剪图像以适应其容器＃s高度和宽度。当您将其与background-position: center center;结合使用时，它将在边缘上均匀地裁剪。最后，您将使用两种不同的度量单位：height: 100vh; width: 100%;

然后问题是，在裁剪图像之前，图像的新宽度和高度是什么＆＃34;覆盖＆＃34;申请？

CSS很难确定，因为它需要知道图像的比例（2560x1600的比例为1.6：1），然后尝试将其装入可变宽度和高度的容器中，以便它是否足够小以填充它，同时裁剪掉任何遗留的东西，在裁剪之前，图像的实际尺寸是多少？

height: 100vh;和width: 100%;都会以上述方式影响其大小。因为这需要比较图像的原始高度和宽度，以及容器的宽度和高度来确定如何拉伸图像，试图用纯CSS来计算这种数学并不是一个问题。如果没有JavaScript的帮助，可以轻松实现CSS。

一个不错的解决方案是为火箭图像添加一堆透明度，使其具有与背景相同的大小，因此它也可以通过相同的＆＃34;覆盖＆＃34;拉伸和裁剪逻辑。

试一试：

https://codepen.io/anon/pen/xjrPvM

HTML：

<div class="background" data-comment="2560x1600 has an aspect ratio of 1.6:1"> 
  <div class="rocket">
</div>
</div>

CSS：

.background {   
    background-repeat: no-repeat;
    background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
    background-size: cover;
    background-position: center center;
    height: 100vh;
    width: 100%;
}

.rocket {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
    width: 100%;
    background-image:     
    url('your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png');
}

在codepen中，我使用了base64编码版本的＆＃34;你的-nock-on-a-2560x1600-canvas-with-lots-of-transparency.png＆＃34; 这只是我在GIMP中放置在2560x1600画布上的火箭，将其转换为-20.0度，将其移动到所需的位置，然后将其导出为PNG。

让背景中的图像始终位于同一位置？

5 个答案: