如何在 CSS 中将一张图片与另一张图片进行比较？

Question

http://tree-leaves.comuf.com/

在这个网站中，尽管调整了 window 的大小，我还是想将树叶的位置固定在树枝上。

为此，我在 CSS 定位中使用了百分比，但是当我调整 window 大小时，我可以看到树叶与树枝没有完全对齐。

知道当我们调整 window 大小时树和叶子的尺寸会改变，我怎样才能更精确地定位叶子？

HTML代码：

<pre>
    <div id="leaves">
        <img src="images/leaf1.svg" id="l_1">
        <img src="images/leaf1.svg" id="l_2">
        <img src="images/leaf1.svg" id="l_3">
    </div>
    <div id="content">
        <img src="images/tree.svg" id="tree">
    </div>
</pre>

CSS代码：

#content {
    float: left;
    width: 100%;
    text-align: center;
    background: linear-gradient(to bottom, transparent 0%,transparent 85%,#893700 85%,#893700 100%);
}

#tree {
    width: 80%;
    left: 10%;
    z-index: 10;
}

#leaves {
    background-color: red;
}
#leaves img {
    width: 5%;
}

#l_1 {
    margin: 0;
    margin-bottom: -4%;
    margin-left:5.7%;
    transform: rotate(-35deg);
}

#l_2 {
    margin: 0;
    margin-bottom: 0%;
    margin-left: 12.9%;
}

#l_3 {
    margin: 0;
    margin-bottom: -4%;
    margin-left: 7%;
    transform: rotate(-5deg);
}

Answer 1

您可以尝试使用视口单位，例如vw。我玩过似乎效果很好，即左边的第一片叶子：

#f_1 {
  margin-bottom: -4vw;
  margin-left: 5.7vw;
  transform: rotate(-35deg);
}

您可以只使用浏览器 Web Inspector/Developer 工具来调整每个叶子的值，当您对它们都满意时保存它。当然，你也可以在树枝上做。

http://caniuse.com/#feat=viewport-units

如何在 CSS 中将一张图片与另一张图片进行比较？

How to fix an image compared with another one in CSS?

html

javascript

css

css-position