[分享]css中引入图片显示出一条线

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

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中引入图片显示出一条线的解决方法，希望对大家有所帮助！