一招教你实现div背景填充图片，满足你对极致视觉效果的需求！

前端

2023-06-02 10:36:49

用CSS赋予你的div背景图片生命力

在网页设计中，div元素是构建布局的关键。通过CSS，你可以轻松为div添加背景图片，提升你的设计美感。

打造视觉盛宴：全屏背景图片

当你想让一张图片占据整个屏幕，全屏背景图片就是你的不二之选。只需使用“background-size: cover”属性，图片就会自动拉伸或收缩，完美覆盖整个背景。

让图片占据C位：居中对齐背景图片

想要让图片稳坐div中央，居中对齐便是你的制胜法宝。使用“background-position: center”属性，图片就会完美地居中显示，无论横向还是纵向，图片都会自动调整位置，保持居中状态。

连续视觉效果：平铺重复背景图片

如果你想让一张图片在div中反复平铺，形成连续的视觉效果，平铺重复便是你的秘密武器。使用“background-repeat: repeat”属性，图片就会在水平和垂直方向上无限重复，创造出令人惊叹的视觉效果。

保持图片比例：不变形背景图片

有时候，你可能希望背景图片在div中保持原有比例，而不是被拉伸或压缩。这时，你需要使用“background-size: contain”属性。它会自动调整图片的大小，确保图片完全显示在div中，同时又不失原有比例。

保留原始尺寸：不拉伸背景图片

如果你不想让背景图片被拉伸或压缩，而是保持原始尺寸，那么“background-size: auto”属性就是你的救星。它会让图片保持原有大小，即使它不适合div的大小，也会在div的左上角显示完整图片。

多张背景图片：组合绽放异彩

想要在div中使用多张背景图片？没问题！CSS为你提供了“background-image”属性，让你可以轻松添加多张图片。只需用逗号分隔图片路径，就能让它们在div中和谐共存，形成别具一格的视觉效果。

精准呈现：背景图片位置微调

有时候，你可能需要对背景图片的位置进行微调，确保它在div中完美呈现。此时，你需要使用“background-position”属性。它可以让你手动设置图片在div中的水平和垂直位置，让图片精确地出现在你想要的位置。

若隐若现：背景图片透明度调节

想让背景图片与div内容融为一体，又不失存在感？背景图片透明度调节便是你的杀手锏。使用“background-color: rgba(0, 0, 0, 0.5)”属性，就能让图片呈现半透明效果，与div内容相得益彰。

焕然一新：背景图片颜色叠加

想让背景图片与div内容形成鲜明对比？背景图片颜色叠加就是你的秘密武器。使用“background-blend-mode: multiply”属性，就能让图片的颜色与div背景色叠加，创造出令人惊艳的视觉效果。

动感十足：背景图片动画

想要让背景图片动感十足，吸引眼球？背景图片动画便是你的制胜法宝。使用“animation”属性，就能让图片随着时间移动、旋转或缩放，为你的网页增添动感和趣味。

代码示例

/* 全屏背景图片 */
div {
  background-image: url("image.jpg");
  background-size: cover;
}

/* 居中对齐背景图片 */
div {
  background-image: url("image.jpg");
  background-position: center;
}

/* 平铺重复背景图片 */
div {
  background-image: url("image.jpg");
  background-repeat: repeat;
}