羽翼博客

typecho网页背景图设计代码

描述
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>  

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »