background和img插入图片

background是背景 用url引入图片背景图片的意思 当使用的时候需要结合宽度和高度来使用 项目打包时 background放置的图片需要 <div style="background-image: url('../../../../assets/images/logo.png');"></div> <!--直接使用上面这种内联样式:style="background-image: url('../../../../assets/images/logo.png')的方式引入背景图时, 由于url('../../../../assets/images/logo.png')中的静态路径不会被编译处理,所以在项目运行起来或者项目打包编译之后, 按照此处../../../../assets/images/logo.png路径无法找到图片。 如果图片放在static路径下,则可以直接这样引入,引入static下的文件不会被打包编译"--> <div style="background-image: url('static/logo.png');"></div> img引入图片 <!--第一种--> <img src="~@/assets/images/logo.png" alt=""> <img src="../../../../assets/images/logo.png" alt=""> <!--第二种--> <img :src="imgData" alt=""> <!--第三种--> <img :src="require('../../../../assets/images/logo.png')" alt="">

background-url 引入图片时一定要写绝地路径 不然打包过后图片会出现找不到的问题

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
横向滚动图源代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none} #wrap{width:720px;border:1px solid #999999;height:140px;overflow:hidden;} #a li,#b li{float:left;width:110px;background: #FFFFFF; border:1px solid; border: #999999;height:130px;margin-left:10px; margin-top:10px; margin-bottom:10px} #scrolls{width:200%;float:left;} #a,#b{float:left;} .left,.right{width:20px;height:20px;background:yellow;cursor:pointer;} </style> </head> <body> <div id="wrap"> <div id="scrolls"> <div id="a"> <ul> <li><img src="img/68控制器.jpg" width="120;" height="120;" /></li> <li><img src="img/7420执行器.jpg" width="120;" height="120;" /></li> <li><img src="img/7421执行器.jpg" width="120;" height="120;" /></li> <li><img src="img/ZZY自力式压力阀.JPG" width="120;" height="120;" /></li> <li><img src="img/插入式涡街流量计.jpg" width="120;" height="120;" /></li> <li><img src="img/超声波流量计.jpg" width="120;" height="120;" /></li> <li><img src="img/传感器.jpg" width="120;" height="120;" /></li> <li><img src="img/电磁流量计2.jpg" width="120;" height="120;" /></li> </ul> </div> <div id="b"> </div> </div> [removed] var $ = function(id){return document.getElementById(id)}; var wrap = $("wrap"); var a = $("a"); var b = $("b"); var show = $("show"); var d; b[removed] = a[removed]; function scrolls(){ d = "n"; if(b.offsetWidth - wrap.scrollLeft <=0){ wrap.scrollLeft = wrap.scrollLeft - b.offsetWidth; } else{ wrap.scrollLeft++; } } t = setInterval("scrolls()",30) function backScrolls(){ if(wrap.scrollLeft <=0){ wrap.scrollLeft = wrap.scrollLeft + b.offsetWidth; } else{ wrap.scrollLeft--; } } function left(){ d = "n"; clearT(); t = setInterval("scrolls()",30); } function right(){ d = "m"; clearT(); t = setInterval("backScrolls()",30); } function clearT(){ clearInterval(t); } function runs(){ if(d == "n"){ left(); } else{ right(); } } wrap. (){ clearT(); } wrap. runs(); } [removed] </div> </body> </html>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值