HTML CSS background-image 背景图像

HTML CSS 背景图像代码:background-image

body {
  background-image: url("img.gif");
}
p {
  background-image: url("paper.gif");
}

默认情况下,background-image 属性在水平和垂直方向上都重复图像。某些图像应只适合水平或垂直方向上重复,否则它们看起来会很奇怪。如果图像仅在水平方向重复 (background-repeat: repeat-x;),则背景看起来会更好,代码如下:

body {
  background-image: url("img.gif");
  background-repeat: repeat-x;
}

background-repeat 属性也可以设置不重复,只显示一次,代码如下:

body {
  background-image: url("img.gif");
  background-repeat: no-repeat;
}

background-position 属性可以设置图片的位置,代码如下:

body {
  background-image: url("img.gif");
  background-repeat: no-repeat;
  background-position: right top;
}

background-attachment 属性设置背景图片是否在浏览器固定位置,还是在网页固定位置,代码如下:

/* 在浏览器固定位置 */
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

/* 在网页固定位置 */
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

如果你发现错误或有其他见解,请给www.zhuei.com留言,我们会尽快更新本文!

发表评论

邮箱地址不会被公开。 必填项已用*标注