今天我来和大家分享一下在CSS中如何放置图片和放大镜的方法。首先,我们需要在HTML中使用img标签来插入图片,比如:<img src= image.png alt= 美丽的风景 &am
<img src="image.png" alt="美丽的风景">
p {<br>
background-image: url("image.png");<br>
}
p {<br>
background-image: url("image.png");<br>
background-position: center;<br>
}
<div class="magnifier"></div>
.magnifier {<br>
width: 100px;<br>
height: 100px;<br>
border-radius: 50%;<br>
border: 1px solid #ccc;<br>
position: absolute;<br>
top: 0;<br>
left: 0;<br>
transform: rotate(45deg) scale(1.5);<br>
}
var magnifier = document.querySelector('.magnifier');<br>
var p = document.querySelector('p');<br>
p.addEventListener('mousemove', function(e) {<br>
var x = e.offsetX;<br>
var y = e.offsetY;<br>
var px = x / p.offsetWidth * 100;<br>
var py = y / p.offsetHeight * 100;<br>
<br>
magnifier.style.backgroundPosition = px + '% ' + py + '%';<br>
});
粉丝
0
关注
0
收藏
0