css中引入图片显示出一条线

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS的背景图片可以通过引入图片的方式来实现,但是在实际操作中,有时候会遇到图片下方出现一条不明显的线的问题。这个问题可以通过以下代码来解决: .background { background-ima

CSS的背景图片可以通过引入图片的方式来实现,但是在实际操作中,有时候会遇到图片下方出现一条不明显的线的问题。

这个问题可以通过以下代码来解决:

 .background {
      background-image: url(图片路径);
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: scroll;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      border: none;
      outline: none;
   } 

其中,最关键的是background-attachment:scroll;这一行代码,它可以防止图片被拉伸,做到了保持原有图片大小的效果,解决了线条产生的问题。

除了使用background-attachment:scroll;这种方式,也可以将原始图片的尺寸设置的比容器小,然后使用background-position:center bottom;的方式来将背景图片定位到容器的底部,也可达到同样的效果。

以上就是关于CSS中引入图片显示出一条线的解决方法,希望对大家有所帮助!

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中引入图片显示出一条线

粉丝

0

关注

0

收藏

0

已有0次打赏