当前位置:主页 > 聚焦 >

css定位图片位置不变的实现方法

时间:2020-12-18 03:56:08

  css定位图片位置不变的实现方法:首先创建一个HTML示例文件;然后引入一个background背景图片;最后给该图片添加“position: fixed”样式即可固定图片位置并保持不变。

  本教程操作环境:windows7系统、css3版,该方法适用于所有品牌电脑。

  :《css视频教程》

  在css中,可以使用固定定位(position: fixed)来定位图片保持图片位置不变,让图片位置可以不随着文字的拖动而改变图片位置。

  position: fixed用于生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。

  固定定位(position:fixed):元素以相对浏览器窗口为基准进行定位的,无论怎样移动你的滑动条,它都会固定在相对于浏览器窗口的固定位置,另外要注意,它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top,bottom,left,right也是相对于浏览器窗口而言的。

  示例:

  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .logo { width: 540px; height: 258px; position: fixed; background: url(

  效果图:

  说明:

  从上面的示例看出:可以使用position: fixed来固定图片位置不变,让图片位置可以不随着文字的拖动而改变图片位置。

热点推荐
1 ESMA警告Polymarket:欧盟规则可能触发零售

消息,欧洲证券和市场管理局警告称,欧盟内提供的预测市场合约可能已符合现有金融规则,...

2 CZ:Michael Saylor对比特币行业的积极影响

消息,CZ表示,Michael Saylor对比特币行业绝对是一个净积极因素,称其为声誉良好的比特币死忠...

3 比特币多头头寸仍占主导,清算潜力达

消息,分析师指出,1个月的清算水平显示出有趣的现象。尽管短期内空头头寸已被清算,但多...

4 哥伦比亚总统佩特罗:特朗普此前

消息,哥伦比亚总统佩特罗:特朗普此前并不知道我被列入美国财政部海外资产控制办公室制...

5 沙特若进一步发动袭击

消息,也门胡塞武装:沙特若进一步发动袭击,将遭到针对沙特机场及重要利益目标的打击。...

6 巴基斯坦与特朗普家族加密项目签署谅解

巴基斯坦今年1月与特朗普家族加密项目World Liberty Financial关联方SC Financial Technologies签署谅解备...

7 美股大赢家:INTC多单平仓割肉,持仓规模

消息,波段交易员在INTC多单上已完全平仓,平仓前持仓规模为3,278,776.64美元。该交易员资金体...

8 美股大赢家:DRAM空单增持13021.30枚,当前

消息,DRAM空单增持13,021.30枚,约合820,922.86美元,持仓规模为5,852,854.21美元,均价为64.84美元,...

9 2026年上半年约70个加密项目关闭或申请破

2026年上半年约70个加密项目关闭、申请破产、宣布停止运营或被归为不活跃,涉及DEFI、NFT、链...

10 以军称在黎南部打击约10处真主党设施

消息,当地时间3日,以色列国防军发表声明称,针对黎巴嫩真主党所谓持续违反停火协议并袭...

成都来彰科技 蜀ICP备2025134723号-1

资讯来源互联网,如有版权问题请联系管理员删除。