小白兔的位置问题
<body>
<div class="sky">
<div class="item1 cloud"></div>
<div class="item2 cloud"></div>
<div class="item3 cloud"></div>
<div class="item4 cloud"></div>
<div class="item5 cloud"></div>
</div>
<div class="grass"></div>
<div class="rabbit">
<img src="img/rabbit.png" alt="">
</div>
</body>
*{
margin: 0;
padding:0;
}
/*天空渐变*/
.sky{
width: 100%;
height: 60vh;
display: block;
background:linear-gradient(to top,#fff,rgb(196, 228, 253));
position: relative;
}
/*草地渐变*/
.grass{
width: 100%;
height: 40vh;
display: block;
background:linear-gradient(to bottom,#fff,rgb(148, 190, 89));
}
/*小白兔位置*/
.rabbit>img{
transform: scale(.2);
position: absolute;
bottom: 50px;
right: 200px;
}
我测试了下，只要不设置缩放，小白兔的位置就没有问题，设置缩放后，小白兔的位置就不对，请教下老师是怎么回事？
正在回答
我以前是这样写的：
<div class="grass"> <img src="img/rabbit.png"> <!-- 兔子 --> </div>
/* 兔子 */
.grass > img {
width: 200px;
height: 190px;
position: absolute;
right: 200px;
bottom: 50px;
}
你好，是因为缩放问题，解决：
方法一：
.rabbit>img {
transform: scale(.2);
transform-origin:right bottom; 设置缩放中心点
}方法二：
不使用 缩放，直接设置高宽。
小兵a的解决方法是正确的，没有绝对的哪个方法是对，哪个方法是错，只要能实现都是好方法，具体还要看需求，针对于目前的这个问题，用小兵a的方法是最简便的。但是你用了缩放，这也很不错，可以看出来你是善于思考的，给你一个赞！但是有的时候没有必要，反而会复杂化，所以还是要选择好的方法，更省时一些。另外别的同学的建议有时候也是很不错的，要相信同学。
大家提出的每个问题老师都会看，有同学帮你解决了问题的时候，老师会帮你检查同学回答的是否合理，是否正确，如果正确就不会再重复回答了，如果没有回答正确，会重新回答。放心，老师一直都在监控这你们的学习情况，不要着急哦。
希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳。
求老师解答一下啊！
你把兔子那个图片放到草地那个div里面去嘛，也就是用草地的div包裹图片，然后兔子图片定位相对于父容器（草地）定位，怎么变都不会跑外面去了
<div class="sky"> <div class="item1 cloud"></div> <div class="item2 cloud"></div> <div class="item3 cloud"></div> <div class="item4 cloud"></div> <div class="item5 cloud"></div> </div> <div class="grass"> <img src="img/rabbit.png" class="rabbit" alt=""> </div>
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星