美文网首页
使用图片作为网页背景

使用图片作为网页背景

作者: shuxikql | 来源:发表于2016-09-11 21:42 被阅读0次
问题来源:

在开发页面的过程中,通常会有使用一张大图来作为网页背景的需求,然而在开发过程中,出现过背景留白或者造成页面滚动等情况。

使用图片作为网页背景的目标
  • 图片覆盖整个网页,没有留白
  • 图片位置居中,保持比例
  • 跨浏览器的兼容性
使用CSS3中的background和background-size

html元素上设置背景
html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

在IE8中,不支持background-size,可以使用 filter 来解决这个问题。
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');

相关文章

  • 使用图片作为网页背景

    问题来源: 在开发页面的过程中,通常会有使用一张大图来作为网页背景的需求,然而在开发过程中,出现过背景留白或者造成...

  • 使用视频作为网页背景

    使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的background-image属性只能使用图片...

  • 从屌丝到架构师的飞越(CSS篇)-CSS背景

    一、介绍 CSS背景指的是可以设置网页背景单一颜色、网页背景为图片、网页背景图片居中于网页、网页背景图片网页固定位...

  • web前端HTML常用标签(1)

    body网页主体bgcolor网页背景颜色 backgroung网页背景图片 text文字颜色 link链接文字...

  • css+精灵图

    1)css精灵是一种处理网页背景图片的方式。精灵图也是一种背景图片。 2 )精灵图的使用1,使用fw一定要用打开的...

  • 图片精灵

    div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css ...

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

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

  • 给网页背景添加跟随鼠标变幻的动态线条特效canvas-nest

    这是一个基于canvas绘制的光标线条粒子组合动态网页背景效果。这个特效使用非常方便,使用原生的 javascri...

  • 图片加载时使用 SVG 作为图片 placehold

    简评:使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。 不同类型的图片 placehold ...

  • CSS高级技巧

    1、CSS精灵技术 sprite 减少请求次数 合成一张大图片(精灵图,雪剪图)处理网页背景图像的方式 2、字体图...

网友评论

      本文标题:使用图片作为网页背景

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