背景缩放background-size

最新推荐文章于 2023-12-27 12:29:03 发布
最新推荐文章于 2023-12-27 12:29:03 发布
阅读量253 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34644270/article/details/103016612
版权

background-size属性规定背景图像的尺寸.

background-size:背景图片的宽度 背景图片的高度;

单位:长度|百分比|cover|contain

百分比以元素自身为基准,
cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域.(等比例拉伸,完全覆盖)
contain把图像扩展至最大尺寸,以使宽度或者高度完全适应内容区域,等比例拉伸,任意一边先与盒子重合即可.

LeonGus
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
background-size使用详解
12-13
background-size: auto | <长度值> | <百分比> | cover | contain取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值...
background-size属性详解
热门推荐
少油少盐不要辣
06-05 11万+
css background-size 属性详解，background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin（图片的起始位置） 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。 background-size 属性 1、定义： background-size 用来调整背景图像...
css详解background八大属性及其含义
前端学习笔记
04-18 2763
background（背景） 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content） 4部分组成，不过这只是从2D的视角来看盒模型的组成，而今天笔者将阐述如何从3D的视角看待盒模型的组成。 从2D视角看盒模型示意图： 从3D视角看盒模型示意图： background-color（背景颜色） 背景颜色是背景中最常用的属性，它支持的值类型有： 颜色名称，比如 red, white
css中background-size属性cover、contain、100%的含义案例详解
wangyining070205的博客
02-14 7360
昨天学前端，看到 css中的background-size属性，忽然对cover、container属性值有点蒙，具体到底什么显示效果有点糊涂。 看了菜鸟教程的解释，还是不太明白。于是自己做了一个案例来验证，除了background-size：cover、background-size：container，还有background-size：100% 100%，通过这个案例，总算把这三者的区别弄明白了。现分享给大家，希望对初学者有所帮助。 一、背景区域和背景图像宽高比例相等 在div中，设置其背景图像，如果
理解CSS3中的background－size(对响应性图片等比例缩放)
weixin_33725126的博客
03-10 2503
理解CSS3中的background－size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px－使用background－size:400px 200px缩放设置 固定宽度400px和高度200px－使用background-size:400px;的缩放设置，那么第二个参数会自...
CSS3的background-size属性，实现响应式式图片等比例缩放。
01-23
CSS3的background-size属性，实现响应式式图片等比例缩放。告别了考虑各种兼容性物理像素的烦恼。
frosted-panel:跨浏览器的解决方案，使用香草JS和CSS可以实现模糊的蒙砂玻璃效果。 旨在与全尺寸背景图像一起使用
05-12
磨砂板 磨砂面板是使用纯Javascript编写的跨浏览器兼容库，可实现响应性的“磨砂玻璃”效果。... 现在，“ Frosted Panel”使用background-size: cover缩放图像background-size: cover从BETA_v1.1开始backgro
jquery.fullBleed:jQuery插件，可缩放图像以占据整个浏览器窗口
05-19
渐进增强对于现代浏览器，img元素将转换为带有背景图像的div，因此它们可以利用CSS3的“ background-size：cover”属性。 这提供了更快的大小调整和更平滑的抗锯齿功能，尤其是在基于WebKit的浏览器中。 IE 7和8将...
imageFitCover:简单的 jQuery 插件，可让您缩放图像以适应其容器元素，如新 CSS“object-fit”指定的那样
07-05
这与使用background-size 的效果相同：用背景图像覆盖，但允许您使用img标签和新的图片模块。 一个展示你想要的效果 目标容器对象内的所有图像将填充其整个区域，而不会改变它们的纵横比。 在填充元素的整个内容框...
背景缩放 background-size
最新发布
christmassss的博客
12-27 523
background-size属性规定背景图像的尺寸。可以用数值，百分比，cover、contain来规定背景图像的尺寸。
html background缩放,background-size使用详解
weixin_34944897的博客
06-19 6341
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：background-size: auto | | | cover | contain取值说明：1、auto：默认值，不改变背景图片的原始高度和宽度；2、：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；3、：0％~100％之间...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 866
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
css3 background-size属性--ie兼容
zerlinda_c的博客
11-24 5650
background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :
2.一：背景缩放background-size:①图片的宽度 图片的高度；②某条边的长度等比缩放③50%④cover；⑤contain；。二：背景二倍图。三：二倍精灵图
lazylYYY的博客
07-26 519
目录 一：背景缩放background-size: 二：背景图片二倍图 一：背景缩放background-size: <style> div { width: 500px; height: 500px; border: 2px solid red; background: url(images/dog.jpg) no-repeat; ...
[转载]css3的一个控制背景的属性，background-size可以缩放大小啦
weixin_30699443的博客
07-15 476
background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同。 html: ...
css sprite与background-size结合实现背景图片等比缩放
liona_koukou的博客
04-10 6166
实际开发中，因为要兼容不同分辨率设备我们的sprite图片可能需要不同的尺寸，比如下面图片我们要用“活动车辆”这个标签，分别需要原图大小和缩小一半之后的图片 如果是单独的图片很好处理，但我们这是一个css sprite处理起来就麻烦一点 我们用到了background-size属性 原图中“活动车辆”的大小是44px*30px,background-position是0px -20px ...
背景图片的缩放
fengltxx的博客
06-19 1343
背景图片的缩放 ONE Goal ,ONE Passion ! 我们看到一些效果,控件中的背景图片会慢慢变大,但是控件不会随着图片的放大而变大.效果如下: 分析:想让图片变大,而且控件本身大小不能改变,那么就要改变图片自身大小,而不能改变控件大小. 实现原理:1,首先拿到我们要放大的图片bitmap.2,使用Bitmap.createBitmap().创建一个bitmap的副本.3,使用matrix
background背景图同比缩放铺满整个页面方法的时候碰到的问题
无缺的博客
05-30 1万+
做了那么多的静态页，没想到还是碰到了一个让我懵B的问题，问题：    我这里用了background-size:cover；背景图同比缩放铺满这个页面之后，如果拉伸屏幕，会发现如下图    尴尬，里面的内容还是原来的位置，但是图片同比缩放这样设置肯定是不行的，解决代码如下：    这个问题可能不算什么技术难点，不过遇到了解决了，就记录下来...
css背景图片background-size
10-12
background-size是CSS属性，用于设置背景图片的尺寸大小。它有几种不同的属性值可以使用： 1. cover：背景图片将被缩放到足够大以覆盖整个容器，并保持比例不变。这可能会导致图片被裁剪或拉伸。 2. contain：背景...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值