CSS-背景4-内容滚动背景图固定

简介: 1、内容滚动背景图固定在指定位置素材:bg.png源代码: 背景图不随内容滚动 body{ background: url(bg.

1、内容滚动背景图固定在指定位置

素材:


bg.png

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图不随内容滚动</title>
    <style type="text/css">
    body{
        background: url(bg.png) no-repeat fixed center;
    }
     
    </style>
</head>
<body>
   测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
</body>
</html>

**运行效果: **
内容滚动,图片不滚动。


image.png
相关文章
|
6月前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
81 4
|
4月前
|
JavaScript 前端开发
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
68 0
|
5月前
|
前端开发
css 平滑滚动 scroll-behavior: smooth
css 平滑滚动 scroll-behavior: smooth
78 1
|
6月前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
6月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
53 1
|
6月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
83 1
|
5月前
|
前端开发 C++
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
226 0
|
7月前
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
|
7月前
|
前端开发
CSS背景
【5月更文挑战第3天】CSS背景。
57 8
|
7月前
|
前端开发 JavaScript UED
【专栏:交互与用户体验篇】CSS 滚动效果与视差滚动
【4月更文挑战第30天】本文探讨了CSS滚动效果和视差滚动在提升网页用户体验中的作用。CSS滚动效果通过`transition`和`animation`属性实现元素动态变化,包括平滑滚动、元素跟随和滚动触发动画。视差滚动则利用不同元素滚动速度差异营造立体感,适用于长页面设计、故事讲述和创意展示。实现方法包括纯CSS和结合JavaScript。这些效果能增强吸引力、提升沉浸感并引导用户注意力,但需注意性能优化、适度使用和兼容性测试。案例分析展示了它们在实际项目中的应用和影响。
84 2