用CSS3实现背景的固定

今天放假了,正好最近养成了没事泡泡博客园的习惯,自己也有了博客。。不得不吐槽一下博客园为什么页面这么古朴,,带的几个模版也没啥意思,反正不符合我口味,幸亏后台提供了编辑CSS的功能,于是我就搬来现有的模板自己改了改CSS,当加背景时遇到了一点问题,背景内容一多拉滚动条背景也跟着跑,并且背景也没有拉伸到整个页面,几经摸索,终于找到了解决办法,用CSS3的background-size、background-attrachment、background-repeat即可实现

1 body{
2 background:url("指定你的背景路径");
3 background-size:cover;//填充背景至父容器
4 background-attachment:fixed;//防止跟着滚动条跑
5 background-repeat:no-repeat;//防止重复
6 }

注意:这条CSS需要CSS3支持(。。现在360这么狂轰滥炸恐怕也没几个人不用360浏览器了,360浏览器默认的是Chrome内核所以没问题)

效果就像我的博客现在的背景

时间: 2024-10-09 19:14:11

用CSS3实现背景的固定的相关文章

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

CSS3之背景 background-size background-origin background-clip

[一]background-size  规定背景图像的尺寸 以像素规定尺寸 div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; } 以百分比规定尺寸(尺寸相对于父元素的宽度和高度) div { background:url(bg_flower.gif); -m

基于CSS3动态背景登录框代码

基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效. 实现的代码. html代码: <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>Welcome</h1> <form class="form"

css3中背景颜色渐变(转)

原文链接:http://caibaojian.com/css3-background-gradient.html 整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的详细解释. via在项目中,有很多地方都用到了背景线性渐变.如果在移动端还可以适当使用CSS3这个属性原文来自:http://caibaojian.com/css3-background-gradient.html css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ ba

CSS3的背景background

 一.设置背景色:background-color background-color: transparent || <color> background-color其主要用来设置元素的背景颜色,其默认值为transparent(不设置任何颜色情况下是透明色),<color>用来设置背景色彩,常用的颜色格式为:颜色名:如"red":rgb色:如rgb(255, 0, 0)或rgb(100%, 0%, 0%):hls值hsl(0, 100%, 50%),二进制值

css3 Gradient背景

css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始颜色],[设置多种过度颜色],[设置结束颜色]) 参数: 第一个参数:指定渐变方向,可以用"角度"的关键字或"英文"来表示: 第一个参数默认:180deg,等同于"to bottom". 后面的颜色至少有2个,即开始颜色和结束颜色. 2.使用 a.举

css3之背景样式

css3中增加的背景相关的样式十分好用 background-origin  : 决定了背景在盒模型中的初始位置,提供了三个值,border,padding和content; background-clip: 决定了边框是否覆盖住背景,提供了两个值,border和padding; background-size: 可指定背景的大小,以像素或百分比显示.其中值还有auto-不改变原始图片大小,cover-将图片背景等比缩放填满整个容器, contain-背景图片等比缩放至某一边紧贴容器边缘为止.

CSS3.0——背景属性

background:在一个声明中设置所有背景属性 body{background:#00FF00 url(bgimage.gif) no-repeat fixed top;} background-attachment:背景图像是否固定或者随着页面的其余部分滚动. background-color:设置元素的背景颜色. background-image:设置背景图像. background-position:设置背景图像的位置. background-repeat:设置背景图像是否及如何重复.

移动端背景无法固定

在移动端制作固定背景时(利用fixed)会出现滚动条滚动时,背景图会跟着滚动,: 解决办法就是给body加个伪元素. body:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(...) center 0 no-repeat; background-size: cover;}