背景图片_背景图片平铺 - CSDN
精华内容
参与话题
  • css背景图片的设置

    万次阅读 2018-03-30 10:57:32
    转自:http://www.360doc.com/content/18/0330/10/54030484_741477948.shtmlcss2 中的背景(background)概述CSS2 中有5个主要的背景(background)属性,...* background-image: 引用图片作为背景。* background-posi...

    转自:http://www.360doc.com/content/18/0330/10/54030484_741477948.shtml

    css2 中的背景(background)

    概述

    CSS2 中有5个主要的背景(background)属性,它们是:

    * background-color: 指定填充背景的颜色。

    * background-image: 引用图片作为背景。

    * background-position: 指定元素背景图片的位置。

    * background-repeat: 决定是否重复背景图片。

    * background-attachment: 决定背景图是否随页面滚动。

    这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域,包括 padding 和 border,但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常,但是 IE6 和 IE7 中,background 没把 border 计算在内。

    Background does not extend to the borders in IE7 and IE6.

    基本属性

    背景色(background-color)

    background-color 属性用纯色来填充背景。有许多方式指定这个颜色,以下方式都得到相同的结果。

    background-color: blue;
    background-color: rgb(0, 0, 255);
    background-color: #0000ff;
    

    background-color 也可被设置为透明(transparent),这会使得其下的元素可见。

    背景图(background-image)

    background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用,因此如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。代码很简单,只需要记住,路径是相对于样式表的,因此以下的代码中,图片和样式表是在同一个目录中的。

    background-image: url(image.jpg);
    

    但是如果图片在一个名为 images 的子目录中,就应该是:

    background-image: url(images/image.jpg);
    

    糖伴西红柿:使用 ../ 表示上一级目录,比如 background-image: url(../images/image.jpg); 表示图片位于样式表的上级目录中的 images 子目录中。有点绕,不过这个大家应该都知道了,我就不详说了。前端观察 版权所有,转载请保留链接。

    背景平铺(background-repeat)

    设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的,但是有时会希望图片只出现一次,或者只在一个方向平铺。以下为可能的设置值和结果:

    background-repeat: repeat; 
    background-repeat: no-repeat; 
    background-repeat: repeat-x; 
    background-repeat: repeat-y; 
    background-repeat: inherit; 
    

    背景定位(background-position)

    background-position 属性用来控制背景图片在元素中的位置。技巧是,实际上指定的是图片左上角相对于元素左上角的位置。
    下面的例子中,设置了一个背景图片并且用 background-position 属性来控制它的位置,同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴(水平)位置,第二个是 y 轴(垂直) 位置。

    background-position: 0 0; 
     
    
    background-position: 75px 0;
     
    
    background-position: -75px 0;
     
    
    background-position: 0 100px;
    

    The image can be set to any position you like.

    background-position 属性可以用其它数值,关键词和百分比来指定,这比较有用,尤其是在元素尺寸不是用像素设置时。

    关键词是不用解释的。x 轴上:

    • * left
    • * center
    • * right

    y 轴上:

    • * top
    • * center
    • * bottom

    顺序方面和使用像素值时的顺序几乎一样,首先是 x 轴,其次是 y 轴,像这样:

    background-position: top right;
    

    使用百分数时也类似。需要主要的是,使用百分数时,浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下:

    background-position: 100% 50%;
    

    This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.

    糖伴西红柿:这一段没想到合适的翻译,保留原文,意译。前端观察 版权所有,转载请保留链接。

    update: 感谢天涯的指教,这段搞明白了。使用百分数定位时,其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说,百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时,使用背景图和元素的左上角为对齐基点。例如上例的 background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点,和元素的 100%(right) 50%(center) 这个点对齐。

    这再一次说明了,我们一直认为已经掌握的简单的东西,其实还有我们有限的认知之外的知识。

    注意原点总是左上角,最终的效果是笑脸图片被定位在元素的最右边,离元素顶部是元素的一半,效果和 background-position: right center; 一样。

    The smiley face is aligned as it would be if it was set to right center.

    背景附着

    background-attachment 属性决定用户滚动页面时图片的状态。三个可用属性为 scroll(滚动),fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。

    为了正确地理解 background-attachment,首先需要明白页面(page)和视口(view port)是如何协作地。视口(view port)是浏览器显示网页的部分(就是去掉工具栏的浏览器)。视口(view port)的位置固定,不变动。

    当向下滚动网页时,视口(view port)是不动的,而页面的内容向上滚动。看起来貌似视口(view port)向页面下方滚动了。如果设置 background-attachment: scroll,就设置了当元素滚动时,元素背景也必需随着滚动。简而言之,背景是紧贴元素的。这是 background-attachment 默认值。

    用一个例子来更清楚地描述下:

    background-image: url(test-image.jpg);
     
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: scroll;
    

    当向下滚动页面时,背景向上滚动直至消失。

    但是当设置 background-attachment 为 fixed 时,当页面向下滚动时,背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。

    用另一个例子描述下:

    background-image: url(test-image.jpg);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    

    We have scrolled down the page here, but the image remains visible.

    页面已经向下滚动了,但是图像仍然保持可见。

    需要重视的一点是背景图只能出现在它父元素能达到的区域。即使图片是相对于视口(view port)定位地,如果它的父元素不可见,图片就会消失。参见下面的例子。此例中,图片位于视口(view port)的左下方,但是只有元素内的图片部分是可见的。

    background-image: url(test-image.jpg);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    

    Part of the image has been cut off because it begins outside of the element.

    因为图片开始在元素之外,一部分图片被切除了。

    背景的简写属性

    可以把背景的各个属性合为一行,而不用每次都单独把他们写出来。格式如下:

    background: <color> <image> <position> <attachment> <repeat>
    

    例如,下面的声明

    background-color: transparent;
    background-image: url(image.jpg);
    background-position: 50% 0 ;
    background-attachment: scroll;
    background-repeat: repeat-y;
    

    可以合为单独一行:

    background: transparent url(image.jpg) 50% 0 scroll repeat-y;
    

    而且不需要指定每一个值。如果省略值地话,就使用属性地默认值。例如,上面那行和下面这个效果一样:

    background: url(image.jpg) 50% 0 repeat-y;
    

    背景的一般用法

    除了可以用来使元素更加优雅这类显然的用法之外,背景也可以用于其它的目的。

    仿栏

    当使用 css 的 float 属性来定位布局元素时,要确保两栏或多栏有相同的长度是比较困难的。如果长度不同,其中一栏的背景会比另外的短,这会破坏整个设计。

    仿栏是个非常简单的背景技巧,这个技巧最早发表在A List Apart 。思路很简单:不再给每列单独设置背景,而是给各列的父元素设置一个背景图。所有栏的设计都包含在这张图片之中。

    文本替换

    在网页上,对于字体的选择是相当有限的。可以使用 sIFR 之类的工具来定制字体,但是这需要用户启用 JavaScript 。一个适用于任意浏览器的简单方法是,用想用的字体来做一张文本图片,并用这张图片作为背景。这样,文本依然出现在文档标记中以供搜索引擎检索和屏幕浏览器识别,但是在浏览器中就会显示首选的字体。

    例如,HTML 标记可能是这样的:

    <h3>Blogroll</h3>
    

    假如有一个 200 乘 75 的图片,上面有更好看的字体,就可以用如下方式来替换文本:

    h3.blogroll {
    width: 200px;
    height: 75px; 
    background:url(blogroll-text.jpg) 0 0 no-repeat; 
    text-indent: -9999px; 
    }
    

    简单的圆点

    无需列表中的圆点看起来很难看。不用再处理所有不同的 list-style 属性,只需要简单地把他们隐藏并用背景图代替就可以了。因为图片可以随意选择,这些圆点就可以看起来更漂亮。

    下面,我们把一个无需列表改造成有圆滑圆点的:

    ul {
    list-style: none; 
    }
     
    ul li {
    padding-left: 40px; 
    background: url(bulletpoint.jpg) 0 0 no-repeat;
    }
    

    CSS3 中的背景

    CSS3 中的背景有较多改进。最显著的是多背景图片的选项,同时也增加了4个新属性。

    多背景

    CSS3 中,可以对一个元素应用一个或多个图片作为背景。代码和 css2 中的一样,只需要用逗号来区别各个图片。第一个声明的图片定位在元素顶部,其它的图片按序在其下排列,例如:

    background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
    

    新属性:背景修剪(background-clip)

    这又把我们带回了文章开始讨论的那个关于边框内图片显示的话题。它被描述为“背景描绘区”。

    background-clip 属性用来增强背景显示位置的控制能力。可能的值为:

    * background-clip: border-box;
    背景显示在边框内。
    * background-clip: padding-box;
    背景显示在内补白(padding)内,而不是边框内。
    * background-clip: content-box;
    只在内容内显示背景,而不是内补白(padding)和边框内。
    * background-clip: no-clip;
    默认值,和 border-box 一样。

    新属性:背景原点(background-origin)

    这个属性和 background-position 结合起来使用。可以从边框,内补白或者内容盒子开始计算 background-position (类似于 background-clip)。

    * background-origin: border-box;
    以边框为原点开始计算 background-position.
    * background-origin: padding-box;
    以内补白为原点开始计算 background-position
    * background-origin: content-box;
    以内容盒子为原点开始计算 background-position
    对于 background-clip 和 background-origin 不同的一个解释参看 CSS3.info

    新属性: 背景尺寸(background-size)

    background-size 用来调整背景图的大小。有好几个可能值:

    * background-size: contain;
    缩小图片来适应元素的尺寸(保持像素的长宽比)
    * background-size: cover;
    扩展图片来填满元素(保持像素的长宽比)
    * background-size: 100px 100px;
    调整图片到指定大小
    * background-size: 50% 100%;
    调整图片到指定大小。百分比是相对于包含元素的尺寸的。

    可以看一下 CSS3规则 网站上的几个例子。

    新属性:(background-break)

    CSS3 中,元素可以被分成几个独立的盒子(例如 使内联元素 span 跨越多行)。background-break 属性用来控制背景怎样在这些不同的盒子中显示。

    可能值为:

    * Background-break: continuous;
    默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子,依然是一个整体一样)
    * Background-break: bounding-box;
    把盒之间的距离计算在内
    * Background-break: each-box;
    为每个盒子单独重绘背景

    背景色(background-color)的改进

    background-color 在 css3 中有了稍许改进。除了设置背景颜色之外,如果元素底层的背景图不可用,还可以设置一个“回退色”。

    通过在回退色之前增加一个斜杠(/)来实现,例如:

    background-color: green / blue;
    

    此例中,背景色应该是绿色(green)。然而,如果底层背景图不能使用的话,背景色就是蓝色而不是绿色。如果在斜杠前不指定颜色,默认为透明(transparent)。

    背景平铺(background-repeat)的改进

    CSS2中当图片平铺时,会被元素在末端截断。CSS3 引入了两个属性来修正这个问题:

    * space: 应用同等数量的空白到图片之间,直到填满整个元素
    * round: 缩小图片直到正好平铺满元素
    关于 background-repeat: space; 的一个例子,可以在 CSS3 规则网站看到。

    背景附着(background-attachment)的改进

    background-attachment 属性增加了一个新值:local。这是用来配合可以滚动的元素的(设置为 overflow: scroll; 的元素)。当 background-attachment 设置为滚动(scroll)时,背景图不会随元素内容的滚动而滚动。

    设置为 background-attachment :local; 时,背景图会随内容的滚动而滚动。

    总结

    总结一下,css 中关于背景有许多需要知道的知识。但是一旦把这些知识融会贯通了,这些技术和命名约定就变得非常有意义而且很快就会成为潜意识行为了。

    如果刚接触 css,主要不断联系就可以较快地掌握背景的要点了。如果是老手,我希望你可以和我一样期待 css3


    展开全文
  • 背景图片background

    2019-08-15 00:35:13
    背景 background 背景颜色background-color 默认值为transparent。 应用于内容、padding、border所在区域。 背景图片background-image(必须有高度) ...背景图片是网页的装饰,只起美化页面的作用...

    背景 background

    背景颜色background-color

    1. 默认值为transparent。
    2. 应用于内容、padding、border所在区域。

    背景图片background-image(必须有高度)

    1. background-image: url(图片地址);
    2. 背景图片不占位。
    3. 默认图片在垂直和水平方向上重复平铺,背景图片会铺满整个区域范围。
    4. 背景图片是网页的装饰,只起美化页面的作用。
    5. 背景图写在样式表中。
    6. 背景图片不会被搜索引擎搜索到。
    7. 图片名称可以是英文、英文和数字的混合,但是不能使用中文。

    背景图是否重复background-repeat

    1. repeat(默认值)背景图片在水平方向和垂直方向都重复。
    2. -x 图片在水平方向上重复。
    3. -y 图片在垂直方向上重复。
    4. no-repeat 在水平方向和垂直方向均不重复。

    背景图片的位置background-position

    1. x,y 水平方向和垂直方向。
    2. 取值 :a 、关键字: left、right、center / top、bottom、center
      b 、长度值:图片的左上角是0px,0px(负值向盒外,正值向盒内)
      c 、百分比:左上角是0%,0% 。右下角是0%,0%。相对于元素。
      【注】本身的宽度与高度设置,如果只提供一个百分数值,提供的值作为水平方向位置,垂直方向假设为50%。

    背景图关联background-attachment

    1. scroll (默认值) 背景图片随页面滚动而滚动。
    2. fixed 背景图固定。

    多背景属性background-image: url(), url(),url();

    1. background-position:0px 0px,100px 100px,right bottom

    背景的初始放置位置background-origin

    1. border-box(从边框区域)
    2. padding-box(从内边距开始的区域)
    3. content-box(从内容开始的区域)

    背景尺寸的属性background-size

    1. xpx ypx(想要铺满,长度和宽度为盒子的宽高)
    2. x% y% (想要铺满,必须全都100%)
    3. cover (按照自身比例从左上角放大,以宽度为主,溢出的“切掉”)
    4. contain (保证东西都存在,但不保证铺满)

    背景的裁剪区域background-clip

    1. border-box(溢出边框的区域切掉)
    2. padding-box(溢出内容区域切掉)
    3. content-box(溢出内边距的区域切掉)

    复合写法

    background:background-color url(图片地址) background-repeat background-position background-attachment

    欢迎使用Markdown编辑器

    你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。

    新的改变

    我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

    1. 全新的界面设计 ,将会带来全新的写作体验;
    2. 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
    3. 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
    4. 全新的 KaTeX数学公式 语法;
    5. 增加了支持甘特图的mermaid语法1 功能;
    6. 增加了 多屏幕编辑 Markdown文章功能;
    7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
    8. 增加了 检查列表 功能。

    功能快捷键

    撤销:Ctrl/Command + Z
    重做:Ctrl/Command + Y
    加粗:Ctrl/Command + B
    斜体:Ctrl/Command + I
    标题:Ctrl/Command + Shift + H
    无序列表:Ctrl/Command + Shift + U
    有序列表:Ctrl/Command + Shift + O
    检查列表:Ctrl/Command + Shift + C
    插入代码:Ctrl/Command + Shift + K
    插入链接:Ctrl/Command + Shift + L
    插入图片:Ctrl/Command + Shift + G

    合理的创建标题,有助于目录的生成

    直接输入1次#,并按下space后,将生成1级标题。
    输入2次#,并按下space后,将生成2级标题。
    以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

    如何改变文本的样式

    强调文本 强调文本

    加粗文本 加粗文本

    ==标记文

    这里是引用

    本==

    删除文本

    引用文本

    H2O is是液体。

    210 运算结果是 1024.

    插入链接与图片

    链接: link.

    图片: Alt

    带尺寸的图片: Alt

    居中的图片: Alt

    居中并且带尺寸的图片: Alt

    当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

    如何插入一段漂亮的代码片

    博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

    // An highlighted block
    var foo = 'bar';
    

    生成一个适合你的列表

    • 项目
      • 项目
        • 项目
    1. 项目1
    2. 项目2
    3. 项目3
    • 计划任务
    • 完成任务

    创建一个表格

    一个简单的表格是这么创建的:

    项目 Value
    电脑 $1600
    手机 $12
    导管 $1

    设定内容居中、居左、居右

    使用:---------:居中
    使用:----------居左
    使用----------:居右

    第一列 第二列 第三列
    第一列文本居中 第二列文本居右 第三列文本居左

    SmartyPants

    SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

    TYPE ASCII HTML
    Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
    Quotes "Isn't this fun?" “Isn’t this fun?”
    Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

    创建一个自定义列表

    Markdown
    Text-to-HTML conversion tool
    Authors
    John
    Luke

    如何创建一个注脚

    一个具有注脚的文本。2

    注释也是必不可少的

    Markdown将文本转换为 HTML

    KaTeX数学公式

    您可以使用渲染LaTeX数学表达式 KaTeX:

    Gamma公式展示 Γ(n)=(n1)!nN\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N 是通过欧拉积分

    Γ(z)=0tz1etdt&ThinSpace;. \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

    你可以找到更多关于的信息 LaTeX 数学表达式here.

    新的甘特图功能,丰富你的文章

    Mon 06Mon 13Mon 20已完成 进行中 计划一 计划二 现有任务Adding GANTT diagram functionality to mermaid
    • 关于 甘特图 语法,参考 这儿,

    UML 图表

    可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::

    张三李四王五你好!李四, 最近怎么样?你最近怎么样,王五?我很好,谢谢!我很好,谢谢!李四想了很长时间,文字太长了不适合放在一行.打量着王五...很好... 王五, 你怎么样?张三李四王五

    这将产生一个流程图。:

    链接
    长方形
    圆角长方形
    菱形
    • 关于 Mermaid 语法,参考 这儿,

    FLowchart流程图

    我们依旧会支持flowchart的流程图:

    Created with Raphaël 2.2.0开始我的操作确认?结束yesno
    • 关于 Flowchart流程图 语法,参考 这儿.

    导出与导入

    导出

    如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

    导入

    如果你想加载一篇你写过的.md文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
    继续你的创作。


    1. mermaid语法说明 ↩︎

    2. 注脚的解释 ↩︎

    展开全文
  • Html设置网页背景图片

    万次阅读 多人点赞 2015-11-29 21:17:48
    为网页添加背景图片可以衬托网页的显示效果,从而取得更好的视觉效果。背景图片的选择不仅要注意好看,而且还要注意不能喧宾夺主,影响网页内容的阅读。通常使用深色的背景图片配合浅色的文本,或者浅色的背景图片...


    为网页添加背景图片可以衬托网页的显示效果,从而取得更好的视觉效果。背景图片的选择不仅要注意好看,而且还要注意不能喧宾夺主,影响网页内容的阅读。通常使用深色的背景图片配合浅色的文本,或者浅色的背景图片配合深色的文本。background属性用来设置网页的背景图片。

    基本语法:

    <body background="图片地址"></body>

    background属性值就是图片的路径。路径可以是相对地址,也可以是绝对地址。

    实例代码:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body background="../images/bg.jpg">
    </body>
    </html>

    背景图片一定要与插图以及文字的颜色相协调。为了保证浏览器载入网页的速度,尽量不要使用字节过大的图片; 
    展开全文
  • 网页的背景图片代码

    万次阅读 2009-07-17 19:37:00
    网页背景图片代码1.(最普遍类)body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center}说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,...
    网页背景图片代码


    1.(最普遍类)

    <style>
    body{background-image:url(logo.gif);
    background-repeat:no-repeat;background-position:center}
    </style>

    说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,网页背景图片不会跟着向上移动,达到不动的目的!

    2.(综合类)

    3.<P class=style6> </P></SPAN><SPAN>
    <TABLE width="100%">
    <TBODY>
    <TR>
    <TD class=ArticleTitle align=left>
    <DIV id=divTitle style="FONT-SIZE: 30px"><B></B> </DIV></TD></TR>
    <TR>
    <TD class=ArticleContent style="FONT-SIZE: 30px; LINE-HEIGHT: 150%" align=left>
    <CENTER> </CENTER>
    <STYLE type=text/css><!--body {background-image:url( 图片地址);

    background-repeat:no-repeat;

    background-attachment:fixed;background-position:50% 50%}</STYLE>
    </TD></TR></TBODY></TABLE></SPAN>

    说明:

    no-repeat;(不平铺)

    改为这个repeat(平铺)

    你要以看一下两边

     

    方法一:
    文章编辑的时候点击创建表格后在弹出的窗口中把边框设置为0,然后填上背景图片的链接地址就好了
    也可以用代码:
    <TABLE height=600 width=600 background=你的背景图片地址 border=0>
    <TBODY>
    <TR>
    <TD>你的主体内容</TD></TR></TBODY></TABLE>
    方法二:
    <body background=你的背景图片地址 >
    方法三:
    <STYLE type=text/css><!--body {background-image:url(你的背景图片地址);background-repeat:no-repeat;background-attachment:fixed;background-position:50% 50%}--> </STYLE>
    方法四:
    背景图是在HTML模式下把以下代码加到已有代码最前面:
    <body background="图片地址">
    注:图片地址必须是网络上已有的图片,不是本地机的,如果要链接本地机的,必先在相册或者其他文章上传之后才可以调用。

    方法五:
    <STYLE TYPE="text/css">
    <!--
    BODY {background-image: URL(图片名称.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;}
    -->
    </STYLE>

     

     



    ◆字体属性:<font color=00dfff face="幼圆" size=4.5>显示文字</font>

    ◆背景,正文,连接颜色:<body bgcolor="#000000" text="#ff9933" link="#ff66ff">

    ◆ 给字体加光晕<table style="FILTER: glow(color=颜色)">文字</table>其中的glow客换成shadow,dropshadow等,产生的效果各不相同

    ◆颜色代码网址http://shirley329.blogchina.com/3501281.html

    ◆背景图案:<body background="http://图片地址" bgproperties="fixed">如果去掉后面的bgproperties="fixed"那么选折的背景会跟页面一起翻,这里给点儿建议,一般上下衔接的很巧妙的或者用碎花,星星之类的作成滚动的比较好,而那种完整的图片最好就固定下?当然自己最好都试一下,看哪个合适另外注意背景一定要选用颜色较浅的图画,要分得清主次,3楼有编辑的小工具,调一下GAMA值就能得到浅色的图片,还有个图片放大器,可以通过插值不失真的放大图片

    ◆背景音乐:<BGSOUND src="http://音乐地址" loop=infinite> 如果不加 loop=infinite 那么背景音乐只播一边就结束了;如果想给自己的音乐加个精美的播放器,可以看这里,还能实现不同歌曲的连续播放里面有9种样式播放器

    ◆页面贴图:<img width=XXpx src="http://图片地址"> 即在涂鸦版里显示的图片,width事宽度还可以是height,也可以同时定义,注意数字与单位间不要有空格,也能用百分比表示,如下面

    ◆浮动的图片<div style="position:absolute;Top:0px;left:250px;"><img width=160% src="图片地址"></div> 这一条比上一个灵活很多通过修改参数可以将图片定位在页面的任何位置 ,资源网址两边的引号是可有可无的单引也可以

    ◆贴图透明化:<IMG style="FILTER: alpha(opacity=100 Style=3 FinishOpacity=0)black();" src=贴图的网址 width=400 height=300> Style可以是1.2.3代表不同的效果、自己试试吧 opacity是透明度0~100 如果是0完全透明

    ◆超链接: <a href=http://www.地址.com target="_blank">被连接的文字</a> 被连接的文字可以更改属性,也可以换成喜欢的图片方法就是换成页面贴图target="_blank"指在新窗口打开,也可以删掉校内对&有限制,一般如果链接中有&就取它前面的地址,当然最好能先试一下

    ◆滚动的超链接: <marquee scrollAmount=2 width=300><a href=http://www.地址.com>被连接的文字</a></marquee>

    ◆改鼠标样式: <body style="cursor:url(’http://鼠标地址’)"> 4楼有270种鼠标

    ◆下面用CSS控制鼠标:<style type=text/css> <!--body{cursor:url(http://鼠标地址1)} a{cursor:url(鼠标地址2); --></style>

    1是正常状态下,2是鼠标放在链接上时的效果


    ◆让页面以幻灯片切换效果显示: <head><meta HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration=6.0, transition=23)"> <meta HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=6.0, transition=23)"></head> 这里enter和exit分别指在访问或离开时背景图片出现和消失的方式 duration是时间,transition是方式共24种,0 盒状收缩 1 盒状放射 2 圆形收缩 3 圆形放射 4 由下往上 5 由上往下 6 从左至右 7 从右至左 8 垂直百叶窗 9 水平百叶窗 10 水平格状百叶窗 11垂直格状百叶窗 12 随意溶解 13从左右两端向中间展开 14从中间向左右两端展开 15从上下两端向中间展开 16从中间向上下两端展开 17 从右上角向左下角展开 18 从右下角向左上角展开 19 从左上角向右下角展开 20 从左下角向右上角展开 21 水平线状展开 22 垂直线状展开 23 随机产生一种过渡方式


    ◆滚动文字 :<marquee scrollAmount=2 width=300 height=160 direction=up>滚动的文字</marquee>

    a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6

    b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值

    c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→ up表示↑,down表示↓。

    d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

    e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)

    f)如何给滚动字幕加超链接?这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了
    g)改变滚动字幕的属性

    颜色:<a style=color:CC6600>滚动的文字</a>
    字体:<font color=00dfff face="幼圆" size=4.5>显示文字</font>
    注意:滚动的内容还可以换成其他的东西,自己慢慢试吧


    ◆设置成滚动:<marquee direction=up marquee scrollamount=3 >当向上滚动height=0时,就隐藏了 

    ◆FLASH动画:<embed style="left: 0px; position: absolute; top: 50px; " align=right src=http://flash地址 width=1000 height=500 type=application/octet-stream ; quality="high" wmode="transparent">

    希望各位能彻底搞懂这个,漂亮的页面都少不了flash比如我的页面里的小时钟,发光的星星都是用它实现的,很多贴子里提供特效不过是修改了里面的引用地址 left top是用来定位的当然也可以用right bottom width height来限制flash的大小align=right 表示右对齐

    ◆FLASH动画(相对定位即放在涂鸦板里):<embed style="left: 150px; position: relativity; top: 800px; " align=right src=http://flash地址 width=400 height=200 type=application/octet-stream ; quality="high" wmode="transparent">

    ◆如果要加时钟的话就用<embed style="left: 150px; position: absolute; top: 50px; " align=right src=http://时钟地址 width=1000 height=500 type=application/octet-stream ; quality="high" wmode="transparent">

    width: hetght: 确定时钟大小,left: top: 来确定钟表在页面的任意位置,上面的代码是我页面时钟的位置

    ◆视频: <embed SRC=你的wmv的地址 type=audio/x-pn-realaudio-plugin CONSOLE=Clip1 CONTROLS=ImageWindow HEIGHT=252 WIDTH=324 AUTOSTART=true loop=true>

    ◆播放FLASH:<embed src=http://播放地址 quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="640" height="480"></embed>

    ◆ 更改页面文字样式(详细图解见5楼)
    <style type=text/css> <!-- A:link{COLOR: #3366FF;FONT-SIZE:10pt;FONT-FAMILY: 宋体};A:visited{COLOR: #3366FF;FONT-SIZE:10pt;FONT-FAMILY:宋体};A:active{COLOR: #FF0000 ;FONT-SIZE:12pt;FONT-FAMILY: 宋体};A:hover{COLOR: #FFFFCC};body{COLOR:#3A5FCD;FONT-SIZE:10pt; FONT-WEIGHT:normal;FONT-FAMILY:宋体} --></style>

    A:link是链接的部分
    A:visited是已经链接过的链接部分
    A:active是被激活的链接部分
    A:hover是鼠标放上去时的显示
    body是正文部分的更改。
    FONT-SIZE 是字号大小的设置
    FONT-FAMILY: 字体名称
    FONT-WEIGHT: bolder 是加粗显示,可以替换的是normal,cite,等等默认的是normal使用这个可以让连接产生按钮形式动画效果


    -----------------------------------------------------------------------------------------


    加一些实用技巧

    ◆技巧1:很多朋友都加了背景音乐,如果打开的页面多了就混在一块了,这是只要按一下ESC键,音乐就停止了

    ◆技巧2:涂鸦板里加的代码多了,修改时就难了,加条注释吧,格式如下: <!--注释内容-->

    ◆在贴子里加链接:打开记事本输入<meta content="0; URL=’目标页面地址’"> 保存为.html形式,然后通过附件上传就可以了;content后面的参数表示几秒种自动跳转,这里当然设为0了如果在两头加上<html> </html>就可以把.html后缀删掉了

    ◆写给有一定网页基础的朋友:通过上面连接的例子不难想到,其实我们完全打破校内网的种种限制自己设计网页,然后上传,只要不大于1M就OK了,1M并不小,设计时所有用到的素材都单个传到校内上,然后作个首页组织起来就行了,就相当校内给我们提供了无限的空间,而且速度不慢,有兴趣的朋友可以试一下

    ◆查看别人涂鸦板里的代码,进入页面右击鼠标,选折查看原代码按CTRL+F输入"涂鸦板"查找就可以定位到涂鸦板的位置了,此法仅供学习之用,一定不要原盘COPY别人的成果

    ◆建立自己的专署留言板,到过我页面的朋友看到了吧,通过链接可以打开专门的页面留言,而原来的则隐藏了,制作如下:

    1:用上面的群栏和留言班设为滚动,参数为向上,高度为零

    2:建立链接,地址为http://www.xiaonei.com/GetLeavewordList.do?id=等号后面加上自己的页面编号(进入自己的页面后最后几个数字就是)

    展开全文
  • html背景图片自适应窗口大小

    万次阅读 多人点赞 2019-05-06 19:14:05
    会把图片拉伸至足够大,但是背景图片有些部分可能显示不全 #bgImg { height: 100%; width: 100%; background: url('../img/bg/snow.jpg') no-repeat; background-size: cover; position: absolu...
  • HTML5背景图片设置

    万次阅读 2017-06-03 15:07:36
    本文转载自:点击 背景颜色属性(background-color) 这个属性为HTML元素设定背景颜色,相当于HTML中... body {background-color:#99FF00;...背景图片属性(background-image) 这个属性为HTML元素设定背景图片,相当于H
  • css 背景图片自适应属性整理

    万次阅读 多人点赞 2019-06-25 19:36:42
    本篇博客主要记录一些使用 css 对背景图片自适应的操作整合 背景图片取消重复 background-image: url(image.jpg); background-repeat:no-repeat; 修改前 修改后 背景图片固定(不会随着内容滚动而改变位置) ...
  • 响应式背景图片的几种方法

    千次阅读 2017-08-20 18:49:50
    响应式背景图片的几种方法总结
  • 背景图片处理

    2019-06-04 22:09:43
    淘宝网站的图片有两种:一种例如淘宝logo,是背景图片;另一种是作为文本表达不了的图片显示。 淘宝功能强大,当网速较低加载不出来css样式时,仍然可以点击图片产生链接进行购物。这里,就这种情况来演示: 初步...
  • html使背景图片充满整个屏幕

    千次阅读 2019-05-28 21:17:40
    代码如下: ... /* 加载背景图片 */ background-image: url(bgimg.jpg); /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-rep...
  • VSCode设置背景图片的两种方式

    千次阅读 2020-04-19 15:44:09
    1.可以通过直接修改VSCode的css代码来设置 2.可以通过下载插件来设置 ... /*背景图片的路径*/ background-image: url(C:/Users/Lenovo/Desktop/壁纸/15.jpg); /* 图片不重复 */ background-repeat: n...
  • html+CSS让背景图片充满整个屏幕

    万次阅读 多人点赞 2017-10-19 13:43:35
    由于给网页设置背景图时,需要设置背景图不重复且充满整个浏览器屏幕。   给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。 其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态...
  • 错误的写法:加到div中结合图片设置min-height,但是页面不会回弹 话不多说直接上代码 终极方案 html,body{ width:100%; height:100% } 再加一段 body{ font-family: &amp;amp;amp;quot;华文细...
  • html设置背景图片自适应

    万次阅读 多人点赞 2019-04-25 17:53:47
    在网上找了很久,终于在一个百度问答里找到正确答案,记录下来,方便以后使用。 在<body>中设置: <body background="images\bg.jpg" style=" background-repeat:no-repeat ;...第一行是图片...
  • wordcloud:自定义背景图片,生成词云

    万次阅读 多人点赞 2017-09-01 08:31:46
    官方简介: github:https://github.com/amueller/word_cloud 官方地址:https://amueller.github.io/word_cloud/ 来一个例子: """ @author:FLY @software:PyCharm @time:2017/08/24 ......
  • java web项目中如何插入背景图片

    万次阅读 2018-11-12 20:12:59
    对于java可视化界面插入背景图片这个倒是轻而易举,只需要background-inage:url(图片路径就行),而对于与web项目中,我开始时也是采用这种方法,但是不尽然,代码如下: &lt;div class='ban' style="...
  • style> .body{ background-image: url('${basepath}/resource/images/loginb1.jpeg'); background-size: 100%; background-repeat:no-repeat; } ...css代码添加背景图片常用代码 1 背景颜色 {
  • Android之Android studio设置背景图片

    千次阅读 2017-05-04 09:09:45
    Android studio设置背景图片和编辑区域的竖线去掉、
  • css背景图片的运用

    千次阅读 2018-08-13 20:00:17
    这篇文章是99翻译Nicolas Gallagher的CSS background image hacks一文。大家都知道,目前有很多浏览器无法实现背景裁切、背景透明度、...那么这篇文章将详细介绍了这几种背景图片的处理方法。 正如前面所说,仅仅...
  • 水平方向调整元素位置 width: 300px; margin: auto;...水平方向调整背景图片 background-position-x: -600px;//水平方向,同理垂直y也可以调整 #triangle03{ width: 0; height: 0; borde...
1 2 3 4 5 ... 20
收藏数 454,300
精华内容 181,720
关键字:

背景图片