background-image属性用于为元素设置背景图像。默认情况下,背景图像会根据容器的尺寸进行拉伸或平铺,以适应容器的大小。然而,在很多情况下,我们希望背景图像能够保持其原始比例,不被拉伸,而是居中显示或进行其他形式的适配。以下是如何实现background-image不拉伸的几种方法: 1. 使用background-size: contain background-...
2.1 设置单个背景图片 说明:默认情况下背景图片进行横向和纵向平铺。 1 background-image:url('res/bgA.jpg') 2.2 设置多个背景图片 说明:渲染时前面的背景图片在上层、后面的背景图片在下层。 1 2 background-image:url('res/bgA.jpg'),url('res/bgB.jpg'); background-repeat:no-repeat; 3. background-...
background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸。src是图片内容(前景),bg是背景,可以同时使用。 此外:scaleType只对src起作用;bg可设置透明度,比如在ImageButton中就可以用android:scaleType控制图片的缩放方式 如上所述,background设置的图片会跟View组件给定的长宽比例进行拉伸。
background-size: cover;此设置确保背景图片无论容器大小如何，都能以最合适的尺寸和比例填充容器，既不拉伸也不变形，达到完美占据容器空间的效果。在使用时，将以上代码加入到背景样式中，如：element { background-image: url('image.jpg');background-size: cover;} 其中，'element' 代表要应用背景...
1、将背景图像完美适配视口 让我们从比技巧更技巧的地方开始。 有多少次你不得不与你的背景图像斗争,以使其完美契合且又没有拉伸感和吸引力的情况? 这里向你展示如何使你的背景图片始终完全适合浏览器窗口! css body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?i...
background-image: url(images/bg.jpg); /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */ background-attachment: fixed; ...
background-image规定要使用的背景图像。2 background: #ff0000 url(/i/eg_bg_03.gif) no-repeat 50% 50% fixed;第一个参数是背景颜色，第二个参数背景图片，第三个参数是否平铺（repeat-x,横向平铺；repeat-y，纵向平铺），第四个参数距左边距离可以用像素（20px）；第五个参数是距上距离；第六个参数是...
使用ScaleDrawable进行背景缩放 ScaleDrawable是Android中的一个Drawable类,可以对其包装的Drawable对象进行缩放处理。以下是一个示例代码,演示如何使用ScaleDrawable对背景图像进行缩放: ScaleDrawablescaleDrawable=newScaleDrawable(getResources().getDrawable(R.drawable.background_image),Gravity.CENTER,0.5f,0.5f);Viewview...
background-image ：规定要使用的背景图像。2、设置背景图片的大小，可以保持原有尺寸，或拉伸到新的尺寸。或者再保持原有比例进行缩放。属性值：数值指定背景图片大小。百分比指定背景图片相对背景区的百分比。auto 以背景图片的比例缩放背景图片。cover缩放背景图片覆盖背景区。（不会被压扁）contain 缩放背景图片完全装入...
/* 每个盒子都设置背景,不平铺 */ background-image: url(./flower.jpg) ; background-repeat:no-repeat; } .box2{ background-origin:border-box; } .box3{ background-origin: padding-box; } .box4{ background-origin: content-box; }