在html中如何让图片跟着滚动条而动

 我来答
惜缘2015
2019-06-03 · TA获得超过263个赞
知道小有建树答主
回答量:341
采纳率:66%
帮助的人:46.4万
展开全部

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、浏览器打开后即可得到如下效果

margox
推荐于2017-12-16 · TA获得超过174个赞
知道小有建树答主
回答量:178
采纳率:33%
帮助的人:132万
展开全部

你的意思是让图片固定在浏览器的某个位置,就算网页滚动但是它的相对位置依然不变么?

用下面的样式

.fixed_img{
    bottom:20px;
    display:block;
    height:100px;
    position:fixed;
    right:20px;
    width:100px;
}

具体的宽度和位置你自己调整,现在这样是将图片固定在浏览器的右下角位置,在把这个样式名加到你指定的图片上面去就行了

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
一周播八天
2019-05-18
知道答主
回答量:3
采纳率:0%
帮助的人:1940
展开全部
<marquee="格式 滚动速度 字符大小 方向"><img src="pic.jpg">文字</marquee>
这样就行,跟他同级。包含在内,图片跟文字一起运动
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
吃饱了不锇
2014-01-13 · 超过34用户采纳过TA的回答
知道答主
回答量:121
采纳率:100%
帮助的人:76.7万
展开全部
overflow:auto;
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lkiarest
2014-01-13 · TA获得超过543个赞
知道小有建树答主
回答量:761
采纳率:100%
帮助的人:409万
展开全部
把图片样式的position属性设置为static,
然后指定固定的位置,就可以了。
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式