html怎么给背景图固定位置,css实现固定背景图像的方法

css实现固定背景图像的方法

发布时间&＃xff1a;2020-08-29 11:26:59

来源&＃xff1a;亿速云

阅读&＃xff1a;81

作者&＃xff1a;小新

小编给大家分享一下css实现固定背景图像的方法&＃xff0c;相信大部分人都还不怎么了解&＃xff0c;因此分享这篇文章给大家参考一下&＃xff0c;希望大家阅读完这篇文章后大有收获&＃xff0c;下面让我们一起去了解一下吧&＃xff01;

所谓固定背景图像&＃xff0c;就是当我们在页面输入任何内容时或者移动鼠标&＃xff0c;背景图像都不会发生变动。css实现背景图像固定也是非常简单的&＃xff0c;我们可以使用css中的background的相关属性来实现。

那么我们在前面的文章中有给大家介绍过CSS如何实现背景图像重复效果。

下面我们就继续给大家介绍css背景图像固定的实现方法。

代码如下&＃xff1a;

body {

background-image: url("/test/img/154e.png");

background-repeat: no-repeat;

background-attachment: fixed;

}

这里是一行文字&＃xff1a;圣诞节快乐&＃xff01;

这里是一行文字&＃xff1a;圣诞节快乐&＃xff01;

这里是一行文字&＃xff1a;圣诞节快乐&＃xff01;

这里是一行文字&＃xff1a;圣诞节快乐&＃xff01;

这里是一行文字&＃xff1a;圣诞节快乐&＃xff01;

这里是一行文字&＃xff1a;圣诞节快乐&＃xff01;

效果如下图&＃xff1a;

background相关属性&＃xff1a;

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。其值为fixed表示当页面的其余部分滚动时&＃xff0c;背景图像不会移动。

background-repeat 属性设置是否及如何重复背景图像。

以上是css实现固定背景图像的方法的所有内容&＃xff0c;感谢各位的阅读&＃xff01;相信大家都有了一定的了解&＃xff0c;希望分享的内容对大家有所帮助&＃xff0c;如果还想学习更多知识&＃xff0c;欢迎关注亿速云行业资讯频道&＃xff01;