如何在CSS中修复与另一个图像进行比较的图像

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

本文关键字：图像 另一个 比较 CSS      更新时间：2023-09-26

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

在这个网站中，尽管调整了窗口的大小，但我想将叶子的位置固定在树枝上。

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

当我们调整窗口大小时，知道树和叶子会改变它们的尺寸，我该怎么做才能更精确地定位叶子？

网页代码 ： 

<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);
}
您可以

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

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

您只需使用浏览器 Web 检查器/开发人员工具即可调整每个叶子的值，并在对它们感到满意时保存它。显然，您也可以在树枝上执行此操作。

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

相关文章：