综合以上步骤,就可以使CSS中的图片铺满整个背景,并且保持图片的纵横比不变,同时避免图片重复。这些设置适用于任何需要背景图片铺满的元素,包括body标签和其他的div元素。
给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。 其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。 CSS body标签的样式如下: 代码解读 body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直、...
9 10 body { background-image:url('images/1.png'); background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }...
(1)body{background:url(背景图) repeat;} 说明:repeat表示背景图的平铺方式!其实一般你将一张图片作为背景时,会默认为平铺,所以不需要刻意去设置,相反如果我们不想图片平铺那么这时就需要设置为no-repeat;这时图片就会按原来的尺寸显示!(2)如果图片过小,那么图片平铺就会出现重复的地方,其实和...
background-repeat:no-repeat;去掉
你的背景图片是什么样的图片,是可重复的图片还是不可重复的,如果是不可重复的,那建议换一张450X450的,如果可重复,那么把background-repeat:no-repeat;去掉就好。
background-repeat: no-repeat; /* 不平铺 */ 然后是铺满容器的问题,如果忽略IE内核的浏览器,用css3属性background-size: 100%;轻松解决,要兼容的话可以设一个背景层放在容器的下方,背景层里面放你的背景图片,宽高设为跟容器一样,然后把容器的背景设为透明即可。
51CTO博客已为您找到关于css3背景图片铺满整个页面的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及css3背景图片铺满整个页面问答内容。更多css3背景图片铺满整个页面相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。
第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> 亳州市药博会后台登陆
一般你这种自动换行是因为宽度不够引起的,dw设计视图预览窗口解析引擎和其他浏览器不一样,就像ie、火狐、谷歌、欧朋等浏览器引擎不一样是一个意思,所以还是要以各个浏览器显示效果标准为目标,不要看dw显示效果。当然,如果你css写的规范,显示效果也是一样的。另外,背景图铺满要用到一个css3属性 ...