在html中如何让图片跟着滚动条而动
1、新建一个文件夹,用来存放网页文件和图片,快捷键ctrl+shift+n。
2、进入新建文件夹里面,右键新建文本文档。
3、进入新建的文本文档,复制下方代码,点击快捷键ctrl+s保存后退出。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度知道</title>
</head>
<body>
<!--
position:fixed;是设置为固定在页面的某个位置,不会随滚动条滚动而移动。
top: 50px;图片距离页面顶部50像素。
right:10px;图片距离页面右边10像素。
display:block;设置图片为块状元素,这样图片不会单独占据行-->
<img style="position:fixed;top: 50px;right:10px;display:block;" src="1.png" alt="">
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
</body>
</html>
4、重命名新建文本文档为index.html,原先的.txt的后缀同时去掉后保存,提示确实要更改后按“是”即可。
5、添加背景图片源文件,并命名为1.png,这些图片为你需要放置的图片。
6、点击index.html,右键浏览器打开预览效果。
7、浏览器打开后即可得到如下效果
2024-07-20 广告
你的意思是让图片固定在浏览器的某个位置,就算网页滚动但是它的相对位置依然不变么?
用下面的样式
.fixed_img{
bottom:20px;
display:block;
height:100px;
position:fixed;
right:20px;
width:100px;
}
具体的宽度和位置你自己调整,现在这样是将图片固定在浏览器的右下角位置,在把这个样式名加到你指定的图片上面去就行了
<marquee="格式 滚动速度 字符大小 方向"><img src="pic.jpg">文字</marquee>
这样就行,跟他同级。包含在内,图片跟文字一起运动
然后指定固定的位置,就可以了。