css背景图展示

网站的背景图设计是一个重要的方面，而CSS提供了强大的功能来实现背景图展示。本文将介绍CSS背景图展示相关内容。

/* background-image属性为元素设置背景图像 */
div{
  background-image: url("bg.jpg");
}
/* background-color属性设置背景颜色，如果背景图加载失败可以显示。 */
div{
  background-color: #f1f1f1;
  background-image: url("bg.jpg");
}
/* background-repeat属性设置如何平铺背景图像 */
div{
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
 /* 不平铺 */
  background-repeat: repeat-x;
 /* 水平平铺 */
  background-repeat: repeat-y;
 /* 垂直平铺 */
  background-repeat: inherit;
 /* 继承父元素 */
}
/* background-position属性设置背景图像位置 */
div{
  background-image: url("bg.jpg");
  background-position: left top;
 /* 左上角 */
  background-position: right bottom;
 /* 右下角 */
  background-position: center center;
 /* 居中 */
}
/* background-attachment属性设置背景图像是否随着页面滚动 */
div{
  background-image: url("bg.jpg");
  background-attachment: fixed;
 /* 固定 */
  background-attachment: scroll;
 /* 随着滚动 */
}
/* background-size属性设置背景图像大小 */
div{
  background-image: url("bg.jpg");
  background-size: auto;
 /* 原始大小 */
  background-size: cover;
 /* 以元素大小为尺寸显示 */
  background-size: contain;
 /* 以元素大小为最大尺寸显示 */
}
 

CSS背景图展示能够优化网站视觉效果，通过这些属性合理搭配能够实现更加出色的效果。