背景图片（二）"/>
CSS 3之背景图片（二）
背景图片（二）
- 1. 背景图片滚动效果
- 2. 背景图片重复效果
1. 背景图片滚动效果
若网页的文本较多，出现了多屏页面，此时背景图片若不能覆盖页面，就会出现看不到背景图片的现象；
使用 background-attachment 属性，用来设定背景图片是否随文档一起滚动；
background-attachment 属性包含了两个属性值：scroll 和 fixed，适用于所有元素；
例子 1：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景演示方式</title><style>body{background-image: url(13.webp);background-repeat: no-repeat;background-attachment: fixed;}p{text-align: center;}h1{text-align: center;color: blue;}</style></head><body><h1>短歌行</h1><p>对酒当歌，人生几何？</p><p>譬如朝露，去日苦多。</p><p>概当以康，忧思难忘。</p><p>何以解忧，唯有杜康。</p><p>青青子衿，悠悠我心。</p><p>但为君故，沉吟至今。</p><p>呦呦鹿鸣，食野之苹。</p><p>我有嘉宾，鼓瑟吹笙。</p><p>明明如月，何时可掇。</p><p>忧从中来，不可断绝。</p><p>越陌度阡，枉用相存。</p><p>契阔谈宴，心念旧恩。</p><p>月明星稀，乌鹊南飞。</p><p>绕树三匝，何枝可依？</p><p>山不厌高，海不厌深。</p><p>周公吐哺，天下归心。</p><h1>短歌行</h1><p>对酒当歌，人生几何？</p><p>譬如朝露，去日苦多。</p><p>概当以康，忧思难忘。</p><p>何以解忧，唯有杜康。</p><p>青青子衿，悠悠我心。</p><p>但为君故，沉吟至今。</p><p>呦呦鹿鸣，食野之苹。</p><p>我有嘉宾，鼓瑟吹笙。</p><p>明明如月，何时可掇。</p><p>忧从中来，不可断绝。</p><p>越陌度阡，枉用相存。</p><p>契阔谈宴，心念旧恩。</p><p>月明星稀，乌鹊南飞。</p><p>绕树三匝，何枝可依？</p><p>山不厌高，海不厌深。</p><p>周公吐哺，天下归心。</p></body>
</html>
background-attachment 属性的值为fixed时，背景图片的位置固定并不是相对于页面的，而是相对于页面的可视范围；
2. 背景图片重复效果
使用 background-repeat 属性，设置的重复方式，包括水平重复、垂直重复与不重复等
background-repeat 属性用于设定背景图片师傅重复平铺；
例子 2：背景图片垂直重复
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景图片重复</title><style>body{background-image: url(3.webp);background-repeat: repeat-y;}</style></head><body></body>
</html>
更多推荐
CSS 3之背景图片（二）
发布评论