CSS实现背景图片详解全屏铺满自适应的方式

问题: CSS实现背景图片全屏铺满自适应的方式

解决：

（1）background-image:可添加多张背景图片。参数：url()  ||    none(默认)background-image: url(images/scroll_top.jpg),url(images/scroll_bottom.jpg),url(images/scroll_middle.jpg);注意：背景图不占位置（不受padding的影响），img插入图片才占位且有4像素的距离，即背景图不能撑出高度。4像素的距离用 vertical-align清除     （2）background-size:背景图片的大小参数：百分比 ||  精确值 ||  auto(默认) ||  cover || containauto:背景图像的真实大小。cover:将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。图片边缘距父元素边框中最远边等比例放大contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等。背景图像始终被包含在容器内。图片边缘距父元素边框中最近边等比例放大注意：1、一般只设置一个值（宽度），高度就等比例缩放，这样不变形background-size:100%    （宽度100% 高度自适应）2、用于调整背景图像是否完整显示（3）background-position复合属性：背景图像位置（ background-position-x  ， background-position-y）参数：x坐标和y坐标，可以使用**方位名词**和**精确单位**【1】方位：top,center,bottom,left,center,right1、两个值都是方位名词，两个值前后顺序无关。background-position:left centerbackground-position:center【2】精确单位：百分数或由浮点数字和单位标识符组成的长度值（表示与容器边缘的偏移量）1、超出父级盒子部分隐藏2、如：20px 50px表示：以图片左上角为基准，向右偏移20px,向下偏移50px【3】注意：                       1、如果只指定一个值，则表示横坐标，纵坐标将默认为50%（居中对齐）2、如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标3、该属性定位不受对象的补丁属性（padding）设置影响4、默认值为：(0% 0%)，即图片定位于对象不包括补丁（padding）的内容区域左上角

         【4】例如：backgroun-position:50% 50%   水平和垂直居中backgroun-position:center centerbackgroun-position-x:left 30px    (向右便宜30px)center:50%   left top =0%   right bottom=100%（4）background-repeat: 背景图像的平铺参数：repeat（默认）  ||  no-repeat || repeat-x || repeat-y（5）background-attachment：背景图像是否固定或者随着页面的其余部分滚动参数：scroll || fixedscroll ：背景图像是随着对象内容滚动fixed：背景图像固定（6）background-color： 背景颜色参数：transparent（默认） || color背景半透明是指盒子背景半透明，盒子里面的内容不受影响（7）background-origin:背景图像的位置border-box ：背景图片从边框的左上角开始padding-box (默认)：背景图像从填充边缘的左上角开始content-box -：背景图片从内容的左上角开始（8）**background:背景复合写法**background: 背景颜色 背景图像地址 背景平铺 背景图像滚动 背景图片位置;

方法一：

 margin:0px;background: url(images/bg.png) no-repeat;background-size:100% 100%;background-attachment:fixed;

方法二

 background: url("bg.png") no-repeat;height:100%;width:100%;overflow: hidden;background-size:cover;//或者background-size:100%;

方法三

body {background-image: url(images/bg.jpg);background-position: center center;background-repeat: no-repeat;/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */background-attachment: fixed;background-size: cover;background-color: #464646;}

CSS实现背景图片详解全屏铺满自适应的方式相关推荐

3种CSS实现背景图片全屏铺满自适应的方式
来源 | https://www.fly63.com/ 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景 ...
CSS：实现background-image背景图片全屏铺满自适应
body {/* 加载背景图 */background-image: url(images/bg.jpg);/* 背景图垂直.水平均居中 */background-position: center c ...
css背景图片全屏铺满自适应不拉伸
可以使用 CSS 的 background-size 属性来实现全屏铺满背景图片,并且不拉伸.下面是一个例子: body {background-image: url(your-background- ...
css实现图片全屏铺满自适应的三种方法
前两天做了一个登录页面,登录页面背景是一张图片.图片要铺满整个屏幕,当时再将整个图片铺满时,总是遇到各种问题:①.图片虽然铺满整个屏幕,但是图片变形了:②.图片没有变形,但是图片没有铺满整个屏幕. b ...
CSS 实现background-image背景图片全屏铺满自适应
.container {height: 100%;{#background-image: linear-gradient(to top, #fbc2eb, #a6c1ee);#}background- ...
CSS实现background-image背景图片全屏铺满自适应大小【伸手党福利】
.classid {/* 加载背景图 */background-image: url(/static/images/bg.jpg);/* 背景图垂直.水平均居中 */background-positi ...
css背景图片全屏铺满自适应
background-image: url('images/bg.jpg'); background-size: cover; min-height: 269px; background-positi ...
html自适应屏幕大小渐变背景色,CSS实现背景渐变和自动全屏的代码
CSS 关于背景渐变和自动全屏的问题主编在css开发时发现了一个致命的问题: 在设置了背景颜色渐变后好不容易调成了全屏覆盖但按下了F11的时候崩溃的世界开始了所以这篇文章主要介绍CSS背景渐变色 ...
解决uni-app开发中iphoneX下背景不能全屏铺满的问题
解决uni-app开发中iphoneX下背景不能全屏铺满的问题参考文章: (1)解决uni-app开发中iphoneX下背景不能全屏铺满的问题 (2)https://www.cnblogs.com/ ...

CSS实现背景图片详解全屏铺满自适应的方式

问题: CSS实现背景图片全屏铺满自适应的方式

解决：

CSS实现背景图片详解全屏铺满自适应的方式相关推荐

最新文章

热门文章