CSS背景图片布局

CSS背景图片布局

<!DOCTYPE html>
<html>
<body>
...Your content goes here...
</body>
</html>
  给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。
  其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
  CSS body标签的样式如下:
  body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}
  上面最重要的一条就是:
  background-size: cover;
  这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在上面的例子中,就是body标签)。
  这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。都知道,当把一个图片拉伸时,图片会变模糊。
  因此,在选择背景图时,要特别注意尺寸。为了照顾到大尺寸屏幕,demo里用的图片尺寸为5498px * 3615px 。
  同时,为了让背景图始终相对于viewport居中,声明了:
  background-position: center center;
  上面的规则会把背景图缩放的原点定位到viewport的中心。
  接下来需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。希望背景图始终相对于viewport固定,即使用户滚动时也是一样。
  解决办法就是:
  background-attachment: fixed;

原文地址:https://www.cnblogs.com/wzp-monkey/p/10383516.html

时间: 2024-11-05 22:39:53

CSS背景图片布局的相关文章

css背景图片、圆角、盒子阴影、浮动

一.css背景图片 1.概述 背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb(0, 0, 255); background-color: #0000ff; background-color 也可被设置为透明(transparent),这会使得其下的元素可见. 3.背景图(background-image) background-image 属性允许指定一个图片展示在背景中.

css 背景图片拉伸[转]

http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; -moz-border-image: url(bg.png)

CSS背景图片定位

原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back

CSS Sprites技术(将背景图整合到一张图中,再利用CSS背景图片定位到要显示的位置)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

【转】链接伪类(:hover)CSS背景图片有闪动BUG

来源:http://www.css88.com/archives/744 ------------------------------------------------------------------------------------------------- IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面

css 背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

css背景图片拉伸

css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; -moz-border-image: url(bg.png) 0; background-repeat:no-repeat\9; background-image:

css背景图片拉伸 以及100% 满屏显示

如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的.  所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性.就是用来控制背景图片的显示的.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合  2.一个很小的条状图,通过repeat后

分享几种CSS背景图片定位的方法

由于观测指标间存在相关性,将导致信息的重叠与低效,我们倾向于用少量的.尽可能多能反映原特征的新特征来替代他们,主成分分析因此产生.主成分分析可以看成是高维空间通过旋转坐标系找到最佳投影(几何上),生成新维度,其中新坐标轴每一个维度都是原维度的线性组合θ′Xθ′X(数学上),满足: 如果存在这么严重的问题,网络上应该早就有人遇到了.但实际上没有一个人提出类似的问题,并且我们使用的 jQuery 也是最新版:v1.12.4 为了避免 FineUIPro 的客户端 JavaScript 的影响,我们把