精华内容
下载资源
问答
  • HTML5网页背景图片属性练习

    千次阅读 2017-11-11 19:55:02
    --背景图片网页滚动和不动以及是否重复显示的演示--> function button1(){ var main=document.getElementById("main"); main.style.backgroundRepeat="repeat"; } function button2...
    <!doctype html>
    <!--背景图片随网页滚动和不动以及是否重复显示的演示-->
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    	function button1(){
    		var main=document.getElementById("main");
    		main.style.backgroundRepeat="repeat";
    	}
    	function button2(){
    		var main=document.getElementById("main");
    		main.style.backgroundRepeat="no-repeat";
    	}
    	function button3(){
    		var main=document.getElementById("main");
    		main.style.backgroundAttachment="scroll";
    	}
    	function button4(){
    		var main=document.getElementById("main");
    		main.style.backgroundAttachment="fixed";
    	}
    </script>
    <title>无标题文档</title>
    <style type="text/css">
    	#main{
    		position:absolute;
    		top:0px;
    		left:0px;
    		width:1920px;
    		height:1200px;
    		background:url(../网页/image/back3.png);
    	}
    </style>
    
    
    </head>
    <body>
    <div id="main">
    	<button id="button1" οnclick="button1()">背景图片重复显示&nbsp</button>
    	<button id="button2" οnclick="button2()">图片背景不重复显示&nbsp</button>
    	<button id="button3" οnclick="button3()">图片背景固定不动&nbsp</button>
    	<button id="button4" οnclick="button4()">图片背景随页面滚动</button>
    	</div>
    </body>
    </html>
    展开全文
  • CSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看background提供的属性值:background : background-color | background-image | background-...
  • font属性可以继承 详细的知识见 (上一篇) 2.补充一个新的选择器  统配符选择器 * 所有的标签  标签 class id 后代,子代,交集选择器 3.background背景  背景颜色 background-color:red; 简写...

    1.浏览器默认字体大小是font-size:16px;谷歌最小字体是10培训,其他浏览器是12px。

    font属性可以继承  详细的知识见 (上一篇)

    2.补充一个新的选择器

      统配符选择器  *  所有的标签

      标签     class  id       后代,子代,交集选择器

    3.background背景

      背景颜色  background-color:red;    简写background:red;

      背景图片  background-image:url("路径");简写  background:url();

      备注   标签请求外面资源  有三种属性   href     src     url

      le9   以下给body设置background-color    不起作用   需要用bgcolor

      

      背景平铺:

      1.平铺    浏览器默认就平铺

      2.  不平铺  no-repeat

      3. 平铺x轴或y轴   background-repeat:repeat-x;

      

      背景大小

      

      background-size:;属性值   有哪些写法?

        A.可以设置具体的大小     200px   200px;  auto   自适应(一般做属性值)

    背景位置background-position   也是坐标轴      向下为正    向右为正数

      背景简写

    边框   border

      border    简写

         边框圆角     border-radius     后面的值是具体的数字    或百分比

     

    转载于:https://www.cnblogs.com/guhuai/p/9637598.html

    展开全文
  • 学习CSS的背景图像属性backgroundCSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看background提供的属性值:background : background-color | ...

    学习CSS的背景图像属性background

    CSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看background提供的

    属性值:

    background : background-color | background-image | background-repeat | background-attachment | background-position

    从属性值的名字就可以很明白的看出来,分别是:颜色、图像、铺排、滚动、定位,其中background-repeat、background-position必须

    是在指定了background-image属性值后才有效。

    background-color:transparent | color 。“transparent”是background-color的默认属性值(红色字表示默认值),意为背景色透明

    ,也就是无背景色;而“color”则指的是颜色了,可以是HTML语言支持英文单词,也可以是十六进制的颜色值,当然推荐还是使用十六进制的

    颜色值来表示,比如黑色使用“#000”。

    background-image:none | url 。默认属性值是无背景图,需要使用背景图时可用url进行导入。

    background-repeat:repeat | no-repeat | repeat-x | repeat-y 。默认属性值是背景图像在纵向和横向上平铺,如果不希望图像平铺而

    是以一个完整的衬图来显示的时候则使用“no-repeat”,相同的道理在横向上平铺则是使用”repeat-x”纵向上平铺则使用”repeat-y”。

    background-attachment:scroll | fixed 。“scroll”是背景图像随对像内容滚动,“fixed”则是背景图像固定。

    background-position:position(length) | position(length) 。对象的背景图像位置有两种方式可选择,一种是使用position(top |

    center | bottom | left | center | right)来定位背景图像位置,而另一种方式则是使用lefgth(数值)来定位,使用数值需要注意的是,

    当只有一个数值时,这个值将用于横坐标,纵坐标将默认是50%,如果有两个数值时,则分别是横坐标、纵坐标。

    了解并熟悉了以上background属性及属性值之后,很容易的就可以对网页的背景图像做出合适的处理。但是在这里有一个小技巧,那就是

    在定义了background-image属性之后,应该定义一个与背景图像颜色相近的background-color值,这样在网速缓慢背景图像未加载完成或是背

    景图像丢失之后,仍然可以提供很好的文字可识别性。比如背景图像是一张黑色的底图,那么文字的颜色自然而然会选择浅色调的甚至白色,

    如果此时背景图像未加载完成或者图像丢失,那么就需要定义一个黑色的背景颜色,才可以保持文字的可识别性。

    本文作者:相关阅读:

    一个php作的文本留言本的例子(四)

    禁止JS运行的代码

    JavaScript Event学习第六章 事件的访问

    全面讲解Linux虚拟化的优势

    适合虚拟主机商的一键批量备份用户网站数据的批处理

    重装Windows系统需要注意的5点事项

    js读写COOKIE实现记住帐号或密码的代码(js读写COOKIE)

    浏览器无法运行JAVA脚本的解决方法

    浅析ASP.NET中两种调用存储过程的方法

    关于DB2 数据库授权的研究

    mysql 数据同步 出现Slave_IO_Running:No问题的解决方法小结

    PHP stream_context_create()作用和用法分析

    安全地编写SQLserver扩展存储过程

    Windows Server 2003 图解DNS服务安装篇

    展开全文
  • 标签里使用backgroud属性设置整个网页背景 &lt;body background="图片路径"&gt; &lt;/body&gt; 文件路径如果和网页在一个文件夹内则只用写图片名字并且如果图片小于网页显示窗口,会...

    网页设计小白一坨,想归纳一下网页背景图的设置的各种方法,现在肯定方法很基础贫瘠,以后通过不断学习会不断更新的……莫欺少年挫……


    直接在HTML的<body>标签里使用backgroud属性设置整个网页背景

    <body background="图片路径">
    </body>

    文件路径如果和网页在一个文件夹内则只用写图片名字并且如果图片小于网页显示窗口,会自动重复添加。

    既然说到这,就顺便归纳下<body>的几个属性吧:

    <body [bgcolor|text|link|alink|vlink|background]>
    OBJECTS
    </body>

    bgcolor:HTML的背景色。
    text:指定HTML文件中文字色彩属性。
    link:指定HTML文件中待链接超链接对象色彩属性。
    alink:指定HTML文件中链接中超链接对象色彩属性。
    vlink:指定HTML文件中已链接超链接对象色彩属性。
    background:指定HTML背景图形。

    TIPS:不过现在html5越来越注重元素的语义化,一般html主要用来设置网页框架,用CSS设置样式即可。


    在CSS中使用background-image属性定义背景图像

    background-image: none|<url>

    默认值为none,无背景图;<url>表示使用绝对地址或相对地址指定背景图像。所导入的图像可以是任意类型。但是符合网页显示的格式一般是GIF,JPG,PNG,如果·背景包含透明区域的GIF或PNG格式图像,则这些图像被设置为背景时,保留透明区域。

    CSS3支持background-image设置渐变背景:

    background-image: <linear-gradient>|<radial-gradient>|<repeating-radial-gradient>;

    取值说明:

    <linear-gradient>:使用线性渐变创建背景图像

    <radial-gradient>:使用径向(放射性)渐变创建背景图像

    <repeating-linear-gradient>:使用重复的线性渐变创建背景图像

    <repeating-radial-gradient>:使用重复的径向渐变创建背景图像

    以上实际上是渐变函数,比较复杂,以后会单独写一篇blog,在此就点一下吧……


    在CSS中使用background-repeat属性控制背景图像的显示方式

    background-repeat:repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2};

    repeat-x 背景图片横向重复

    repeat-y 背景图片纵向重复

    repeat 背景图片横向和纵向重复

    no-repeat 背景图片不重复

    round 背景图片自动缩放直到适应且填满整个容器,仅CSS3支持

    space 背景以相同的间距平铺且填满整个容器或某个方向,仅CSS3支持


    在CSS中使用background-attachment定义固定背景

    一般情况下,背景图像能够跟随网页内容整体上下滚动。有些特殊背景图像如水印或者窗口背景希望不管滚不滚动窗口图像一直显示,该属性能够定义背景图像始终显示在窗口的某个位置。

    background-attachment: fixed|local|scroll

    默认值为scroll。

    fixed:背景图像相对于浏览器窗体固定。

    scroll:背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。

    local:背景图像相对于元素内容固定也就是说当元素内容滚动时背景图像也会跟着滚动,此时不管元素本身是否滚动,当元素显示滚动条时才会看到效果。该属性仅CSS3支持。


    在CSS中使用background-position属性定义背景图像的显示位置

    默认情况下,背景图像都是从元素 padding 区域的左上角开始出现的,即图像的左上角和包含框左上角顶点是重合的。

    background-position: xpos ypos | x% y% | x y ;

    background-position属性需要 2 个参数值,第一个值用于横坐标,第二个值用于纵坐标,默认值为 0% 0%,即背景图像的左上角与对象背景区域的左上角对齐(left top)。如果只提供一个值,则用于 x 轴方向,y 轴方向使用默认值 center,即垂直居中。

    xpos ypos:表示使用预定义关键字定位,水平方向可选关键字有 left | center | right,垂直方向可选关键字有 top | center | bottom。xpos 为 left 表示图像的左边与对象的左边对齐,为 right 表示图像的右边和对象的右边对齐;ypos 为 top 表示图像的顶部和对象的顶部对齐,为 bottom 表示图像的底部和对象的底部对齐;xpos、ypos等于 center表示图像在水平和垂直方向的中心,和对象在水平和垂直方向的中心对齐。

    x% y%:表示使用百分比定位,是将图像本身(x%, y%)的那个点,与背景区域的(x%, y%)的那个点重合。

    x y:表示使用长度值定位,是将背景图像的左上角,放置在对象的背景区域中(x, y)所指定的位置,即 x, y 定义的是背景图像的左上角,相对于背景区域左上角的偏移量。

    在CSS3中,background-position属性支持 4 个参数值,前两个值用于横坐标,后两个值用于纵坐标。这意味着我们可以相对于上左下右任意一个角落定位,而不是之前只能相对于左上角定位。可以用长度值、或百分比来指定背景图像的起始位置。

    如果只提供一个值,则第二个值为center。如果提供两个值,第一个长度或百分比表示水平偏移,第二个长度或百分比表示垂直偏移。长度或百分比,表示背景图像的左上角相对于背景位置区域左上角的偏移。如:

    background-position: left 10px top 15px; /* 10px, 15px */
    background-position: left top ; /* 0px, 0px */
    background-position: 10px 15px; /* 10px, 15px */
    background-position: left 15px; /* 0px, 15px */
    background-position: 10px top ; /* 10px, 0px */
    background-position: left top 15px; /* 0px, 15px */
    background-position: left 10px top ; /* 10px, 0px */

    在CSS中直接定义复合元素background的属性

    把background-image,background-repeat,background-position等背景属性合并在一起在background属性中统一声明,这样能节省代码。因此background属性也称为复合属性。

    示例:

    body {
    	background: #069FF url(images/bg.jpg) repeat-x left bottom;
    	margin-right: 2cm;
    	margin-left: 2cm;
    }

    在这个示例中,直接使用了一个大图来定义网页背景。设置背景图像沿x轴方向平铺,同时使用关键字定位图像从浏览器窗口的左下角开始平铺。为了避免因为背景图像的丢失而影响页面的显示效果,同时在background属性中定义一个接近蓝色的颜色(#069FFF),然后设置外边距两边各2cm。

    -----------------------------------------有了新学习接更-----------------------------------------

    展开全文
  • HTML表格标记教程(8):背景图像属性BACKGROUND互联网 发布时间:2008-10-17 18:56:21 作者:佚名 我要评论为表格设置背景图像,可以使用任何的GIF或者JPEG图片文件。基本语法语法解释定义背景图象时,写下图片文件的...
  • 为表格设置背景图像,可以使用任何的GIF或者JPEG图片文件。 基本语法 语法解释 定义背景图象时,写下图片文件的完整路径或者相对路径。 文件范例:10-8.htm 设定表格的背景图像。01 <!– —————————— ...
  • 下面本篇文章就给大家介绍css设置网页背景图片的方法,希望对大家有所帮助。在CSS中,可以使用background-image属性和background属性来设置背景图片。background-image属性用于设置一个元素的背景图像;元素的背景是...
  • 添加网站全局背景图片显示:背景图片颜色属性(background-color)设置一种...背景图片属性(background-repeat:)定义图片的平铺模式,默认值为repeat图片在水平和垂直方向重复显示。repeat-x : 图片延x轴水平平铺显...
  • 我们可以为单元格设置背景图像,可以使用任何GIF或者JPEG图片文件。 基本语法 <TD BACKGROUND=FILE_name> 语法解释 定义背景图象时,写下图片文件的完整路径或者相对路径。 文件范例:10-25.htm 设定单元格的背景...
  • Html设置网页背景图片

    万次阅读 多人点赞 2015-11-29 21:17:48
    网页添加背景图片可以衬托网页的显示效果,从而取得更好的视觉效果...background属性用来设置网页背景图片。 基本语法: background属性值就是图片的路径。路径可以是相对地址,也可以是绝对地址。 实例代码:
  • CSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看background提供的属性值: <br /> background : background-color background-image...
  • 在css代码中设置背景图片的方法,包括背景图片背景重复、背景固定、背景定位等用css设置网页中的背景图片,主要有如下几个属性:1,背景颜色{">说明:参数取值和颜色属性一样注意:在HTML当中,要为某个对象...
  • 网页背景图片设置

    2019-09-03 23:20:23
    使用background-image来设置背景图片 ——语法:background-image:url(相对路径); 如果背景图片大于元素,默认会显示图片的左上角 如果背景图片和元素一样大,则会将背景图片全部显示 如果背景图片小于元素大小...
  • 拓展资料 背景 (background) 属性定义元素的背景效果 元素的背景区包括前景之下直到边框边界的所有空间。因此,内容框与内边距都是元素背景的一部分。取值:repeat、no-repeat 、repeat-x、repeat-y 。 repeat : 默...
  • Sets or retrieves how the backgroundImage property of the object is tiled.Syntax HTML { background-repeat : sRepeat }
  • 方法:1、在body标签中,使用bgcolor属性设置背景颜色,语法“”;...那么html怎么设置网页背景?下面介绍一下。背景颜色(Bgcolor)bgcolor 属性规定文档的背景颜色。属性值可以是十六进制数、RGB 值或颜色...
  • 网页背景图片加遮罩层详解

    千次阅读 2019-07-14 17:38:16
    首先加入背景图片 别的不说先上代码 <head> <!--中间引用和配置掠过--> <style> body { background-image: url("images/jumborton.jpg"); background-size: contain; -webkit-...
  • html点击文字改变网页背景图片

    千次阅读 2020-04-21 17:59:45
    HTML点击文字改变网页背景图片 先看看效果图: 想要实现上述的效果很简单的,用上JavaScript通过标签元素id,用document.getElementById().style设置标签元素的css属性 有两种方法: 法一: 只需要改变一个css属性...
  • 元素中的background 属性来设定网页背景图片。 语法格式如下: &lt;body background="URL"&gt; background 属性的取值为URL地址,是可以从互联网上得到的资源的位置和访问方法的一种简洁...
  • 设置html背景图片属性

    2021-01-12 10:00:54
    #big { background-image: url(${basePath}/dist/img/login.png); background-repeat: no-repeat; background-position: top; background-attachment: fixed; } #login-body { left: 55%;... .
  • CSS 背景 background属性

    2018-02-17 20:48:31
    背景背景是创建更有趣味的网页的常用一种手法,无论是直接使用背景颜色,还是使用背景图像,都能给网页带来丰富的视觉效果。在CSS1中,就提供了对背景的控制,并提供了 5 个background相关的属性,用来设置背景颜色...
  • HTML网页背景添加图片

    千次阅读 2020-04-13 18:14:11
    在网页中添加不重复、全覆盖、图片长宽比不变的网页背景 具体步骤如下: 将待添加的图片放到.jsp同一目录下,这样写URL比较方便 在<body> 标签中添加 background=… <body background="view.jpg" style=...
  • 【实例介绍】html背景图片滚动属性bgproperties在默认情况下,如果页面的内容较长,当拖动浏览器滚动条的时候,背景会随着文字内容的滚动而滚动,所谓背景图像固定,是指不论浏览器的滚动条如何拖动,背景都永远固定...
  • 背景图片平铺属性

    2019-10-02 15:33:51
    如何控制背景图片的平铺方式? 应用场景:可以通过背景图片的平铺来降低图片的大小,提升速度网页的访问 转载于:https://www.cnblogs.com/malong1992/p/11483173.html...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,752
精华内容 32,700
关键字:

网页背景图像属性