一、HTML给图片绝对定位
在HTML中，我们可以给一张图片添加绝对定位来使其脱离文档流，从而可以在页面上自由移动。下面我们来看一个简单的示例：
<div class="wrapper"> <h2>这是一个标题</h2> <img src="img1.jpg" class="positioned" alt=""> <p>这是一个段落</p> </div>
我们在一个div元素内部插入了一个图片和一个段落，同时设定wrapper类的position属性值为relative。图片的class属性为positioned，接下来给图片添加以下CSS样式：
.positioned {
position: absolute;
top: 50px;
left: 50px;
}
这将让图片从其父元素的坐标系中脱离，相对于文档的左上角定位，从该点偏移50像素的左上角继续显示。
当然，还有其他属性可以控制绝对定位元素，例如right和bottom。right：50px；则是将元素向右移动50像素
二、CSS图片绝对定位
在CSS中，我们可以使用绝对定位来控制图片的位置和大小。下面我们来看一个示例：
<div class="wrapper"> <h2>这是一个标题</h2> <img src="img1.jpg" class="positioned" alt=""> <p>这是一个段落</p> </div>
同样的，我们用CSS来设置图片的样式，如下所示：
.positioned {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
}
这将让图片绝对定位，并使其垂直和水平中心在父元素的中心。接下来，我们使用 translate() 函数将它们返回到它们的正确位置。它的 width 更改为 200 像素是因为它太大了，我们需要它更小些
三、CSS图片绝对定位的特殊效果
使用绝对的定位还可以实现复杂的效果，例如拼图游戏中的有序变换。下面我们来看一个简单的示例：
<div class="wrapper"> <h2>这是一个标题</h2> <img src="img1.jpg" class="positioned" alt=""> <p>这是一个段落</p> </div>
接下来我们来添加CSS样式，初始状态左上角是0，0：如下
.positioned {
position: absolute;
top: 0;
left: 0;
width: 40%;
transition: all 1s ease;
}
这样在后续的操作中就会使用到 transition 这个属性了。然后，我们可以通过类似以下的方式操作来将图片移到它的新位置：
.changed {
transform: translateX(50%) rotate(-45deg);
left: 50%;
top: 100px;
}
然后就可以玩出丰富的效果了。实现过程就是把图片在前后两个位置中间加一个中间状态：
.initial {
position: absolute;
top: 0;
left: 0;
width: 40%;
}
.middle {
transform: translateX(50%) rotate(-45deg);
left: 50%;
top: 100px;
transition: all 1s ease;
}
.final {
transform: translateY(200%) rotate(180deg);
left: 80%;
top: 0;
transition: all 1s ease;
}
我们假设需要拼成的图形为直角三角形向右倾斜，然后我们可以在中间的效果中进行旋转、偏移和变形。它将在1秒的时间内不间断地从初始状态到中间状态，然后是最终状态。同时谨记，transition属性可以使变化更平缓，过度的效果更自然
总的来说，绝对定位的图片在网页的设计中有着非常重要的地位。它可以实现对于图片在页面布局中的自由设计，同时也可以做到一些比较炫酷的特效。所以，前端程序员在设计页面的时候，绝对定位的图片是避免不了的。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/276068.html
微信扫一扫 
支付宝扫一扫 