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://ypycc.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>
—— THE END ——
最后更新于 2022-01-21「部分内容存在时效性,如有失效请留言反馈」
除注明外为 羽翼博客 原创文章,转载请注明出处。
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
本文链接:https://www.886a.top/archives/110.html