自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(2)
  • 收藏
  • 关注

原创 动画盒子布局问题,背景图片全窗口显示问题

全窗口显示: 将背景图充满整个html和body: 采用背景图的好处是充满窗口时不会像插入图片那样被压缩尺寸变形,采用 background-size: cover;使背景图自适应填充,并用定位属性将图片移动到窗口中心。这个问题相当于在一个盒子中将背景图居中填充问题。 * { margin: 0; padding: 0; } /* 背景图全屏显示 */ html,body{ ..

2022-05-12 21:58:38 346

原创 关于背景图与图片的区别整理,项目实操

img图片可看做行内块元素,它的尺寸可以撑开父盒子的高度,因此往往插入图片后再浏览器中能“立竿见影”。比较好的做法是给图片套上一层盒子,设置盒子的大小后将图片的宽高设置为100%,这样在盒子尺寸变化后图片的尺寸也能相应改变。 背景图更像是背景而非图片实体 ,因此它无法像图片那样撑开盒子的尺寸“自行显现”,因此必须给父盒子设置尺寸后才能看到背景图,并通过background-positon属性调整背景图的位置、background-size调整背景大小。这种做法在插入精灵图时应用较多。 图片开关项目举例,

2022-05-12 20:47:56 793

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除