typecho网页背景图设计代码

羽翼博客

发布于 2022-11-28 11:28:53

7340

这篇文章最后修改于 2022-01-21 日，距今已有 305 天，请注意甄别内容是否已经过时！

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-attachment :定义背景图片随滚动轴的移动方式

取值: scroll | fixed | inherit

scroll: 随着页面的滚动轴背景图片将移动

fixed: 随着页面的滚动轴背景图片不会移动

inherit: 继承初始值: scroll

继承性: 否

适用于: 所有元素

body {
    background-image: url(https://for.886a.top/wp-content/uploads/2021/05/内衬纸.png); 

    background-repeat: repeat;
    background-attachment:fixed;
}

ps: 参考以下修修改

body {
    background-image: url(../images/bakimg.jpg); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;
}

background不随浏览器滚动的代码如下：

CSS代码

body { background:url(背景图片地址) no-repeat fixed center top; margin:0; padding:0; }

只需要一个核心代码就实现了背景不随浏览器滚动，兼容了IE6+浏览器，其核心代码为：

background-attachment: fixed;

无论滚动条如何拖动，背景图片始终牢牢固定在页面上。

IE6浏览器实现背景不随浏览器滚动的代码：

JavaScript代码

<script type="text/javascript">var scrollBackground = true;</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-05-01，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

面向对象编程

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

面向对象编程

登录后参与评论

0 条评论

热度

typecho网页背景图设计代码

typecho网页背景图设计代码

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐