Posted on | by liu
HTML 中使用图像通常需要用到 CSS,通过 CSS 可以为图像定制样式。
在 CSS 中,可以通过 background 属性来设置背景。
例如,可以使用以下代码将一张图片作为背景:
background: url("image.jpg");
其中,url() 是 CSS 中用来引入图像的方法,括号内则填写图像文件的路径。
另外,通过 background-repeat 属性可以设置图像的重复方式,常见的取值为 no-repeat、repeat-x 和 repeat-y:
background-repeat: no-repeat; /* 不重复 */
background-repeat: repeat-x; /* 仅水平方向重复 */
background-repeat: repeat-y; /* 仅垂直方向重复 */
还可以通过 background-size 属性设置图像大小。其中,可以使用关键字 cover 和 contain 分别取值为“覆盖”和“包含”,也可以指定具体的大小:
background-size: cover; /* 背景图像将被缩放以填充容器 */
background-size: contain; /* 图像将缩放以适合容器 */
background-size: 100px 50px; /* 宽为 100 像素,高为 50 像素 */
除了以上三个主要的属性外,还有 background-position、background-attachment 等属性可以进一步定制背景样式。
总而言之,通过以上简单的 CSS 代码,可以轻松设置页面中的图片背景,为页面增加更丰富的视觉效果。