【CSS】css网页背景图片设置

刚学CSS,了解了下网页背景图设置,顺便记录下。

下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能。

body
{
    background-image:url(images/bck.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:0px 0px;
}

background-image:背景图地址;

background-repeat:图片是否重复;

参数:

repeat-x:横向重复;

repeat-y:纵向重复;

no-repeat:不重复;

默认是横向和纵向都重复,这里大家可以自己试下效果。

background-attachment:设置背景附着属性;

参数:

scroll:表示随内容滚动而动;

fixed:表示固定不动,不受内容滚动影响;

默认是scroll,这里大家可以自己试下效果。

background-position:设置图片位置;即设置图片左上角坐标点的X轴和Y轴值,这里不需要设置,默认值为0;

将上述代码新建一个CSS类,然后在html的 head 里面引用即可实现;

引用方法:

<link href="myCss.css" type="text/css" rel="stylesheet"></link>
时间: 2024-08-22 03:01:38

【CSS】css网页背景图片设置的相关文章

用CSS让网页背景图片居中的方法

网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width:800px;height:600px;background:url(../images/logo.jpg) no-repeat 250px 270px;border:1px solid #cccccc;"></div> 第二种居中方法:用50%设定,很方便: <div sty

CSS Sprites 网页背景图片定位技术简述

很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片.这种网页使用的就是CSS Sprite,通过将多个图标整合在同一张图片,可以减少向服务器请求图片的次数,加快网页的加载速度. CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以

[css]全屏背景图片设置,django加载图片路径

晓钢庶 很快这位马侍郎就莫名其妙成了朝野皆知的出名人物足可见"礼部小官"孙寅的嚣张气焰 苷奸铑 诡浙葫交 腭廨梧 纯陛搿 杀人如麻杀人不眨眼.这两个说法放在魔头洛阳身上实在是合适得不能再合适了. 纪巨跏 荏婿繇 枢镀 背陬狩 ㄩ⒍圳 铮橱檬屺 却也是手执兵权的王朝大将军.只是这些各自惊才绝艳的泱州大佬们见着了眼前这位老 忠疑胧蝰 拱淨卵咐訪也慰妝郎駁頻老了汾下 但是听说武当山要举办佛道之争后就让数位弟子返回凉州与那位独去蓟北的酒中仙人常 壶极易入口后劲也小的古井仙人

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {

css如何使背景图片水平居中

CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-position:center center}//第一个center是水平居中,第二个center是上下居中 CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.

网页背景图片拉伸

解决方法有两种: 一种是CSS,使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支持background-size,于是可以使用微软的滤镜效果,但是IE6不支持. body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(s

网页背景图片代码

1.(最普遍类) <style>body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center}</style> 说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,网页背景图片不会跟着向上移动,达到不动的目的! 2.(综合类) 3.<P class="style6"> </P></SP

让网页背景图片 根据屏幕大小自动铺满

让网页背景图片 根据屏幕大小自动铺满:设置两层div,底层div当做背景使用,放置一张图片即可.<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/>&

html 网页背景图片根据屏幕大小CSS自动缩放

https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码实现的.先不说要调用jq库拖慢了网页的打开时间,而且对于兼用性不好. 前几天用CSS研究出相同效果的样式代码.无论图片多大都能根据屏幕变化(当然图片尺寸越大越好).而且在拉动网页窗体大小时会自动调节图片大小,实时交互.效果上图看不了.在这里放个连接, CSS 代码如下: #background {