32、CSS背景与定位属性全解析

backprop5master

于 2025-10-26 09:05:30 发布

阅读量14

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS设计之道：从入门到精通文章标签： CSS背景属性 background-repeat background-position

本文链接：https://blog.youkuaiyun.com/backprop5master/article/details/154164946

CSS设计之道：从入门到精通专栏收录该内容

37 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

CSS背景与定位属性全解析

1. 控制背景重复

在网页设计中，背景图像的重复方式会影响页面的整体视觉效果。我们可以使用 background-repeat 属性来控制背景图像的平铺方式。
- 限制y轴平铺 ：使用 repeat-y 关键字可以让图像仅沿y轴平铺。
- 禁止平铺 ：使用 no-repeat 关键字可以防止背景图像平铺。

下面是一个实际操作示例，以JT’s Island Grill and Gallery的样式表为例：
1. 打开 base_styles.css 样式表，添加以下声明以关闭 palms.jpg 背景图像的平铺：

body {
    background-image: url('../images/backgrounds/palms.jpg');
    background-repeat: no-repeat;
    padding: 5em 0 1.2em 0;
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    text-transform: lowercase;
}