美文网首页
css背景图片自适应

css背景图片自适应

作者: 新篇章 | 来源:发表于2017-12-25 15:20 被阅读0次
body {
            background: url(/happytime/img/index.jpg) no-repeat center center fixed; 
            background-size: 100%;//此处要注意,可以填cover也可以填100%。建议填100%
 }

备注:折腾了俩个多小时,才解决一个bug,就在上面标注的那个需注意的地方。background-size是一个css3属性。原本设的置是cover,图片会填充屏幕。但是发现在360极速浏览器下左边会有1像素的白边。按照W3CShool给的值就三种:cover,contain,auto。其实这里可以填像素也可以填百分比。按理说百分比和cover是一个效果,但是在360极速浏览器里,就是差了那么一两个像素,别的浏览器都没问题。
其实准确的说是只有在360极速浏览器的极速模式里才有这个问题。
background-size的两个可选值的含义:contain是让背景图片恰好显示在容器中,图片的外边缘“顶着”容器的内边缘;而cover是覆盖容器,容器的外边缘“顶着”图片的内边缘。

另外,center是让图片居中定位,让图片的中部位于浏览器的中部。fixed使得背景不会跟随滚动条移动。

相关文章

  • 图片自适应显示

    CSS动态计算 背景图片自适应

  • 文章收藏

    css 1、纯CSS控制背景图片100%自适应填充布局 thinkphp 1、thinkphp如何去掉index.php

  • HTML 背景图片自适应

    在style中或者css中写入以下代码,即可实现背景图片自适应:body { background-image: ...

  • 如何用CSS实现背景图片自适应?

    在HTML中通过CSS设置背景图片自适应浏览器大小,该如何实现? 用background-size属性,你想给他多...

  • 背景图片自适应

    .bgColor{ background-image:url("../img/sprus3.jpg"); filt...

  • css背景图片自适应

    备注:折腾了俩个多小时,才解决一个bug,就在上面标注的那个需注意的地方。background-size是一个cs...

  • CSS&JS一些问题

    实现div横向排列,元素往两边撑, 中间自动撑开空格。在父元素里设置 背景图片自适应div 背景图片自适应 tex...

  • css自适应

    css自适应

  • 网页背景图片,如何自适应不变形

    css奇技淫巧,mark在此,以备后查! 网页背景图片,如何自适应不变形,一般想法是将图片内容和背景分开成两张图,...

  • css背景图片居中自适应

    图片作为背景时,很容易被拉伸或收缩,分享一种css写法能使无论多大图片,多大屏幕都能够使得图片在最中间。

网友评论

      本文标题:css背景图片自适应

      本文链接:https://www.haomeiwen.com/subject/xsmlgxtx.html