如何在HTML和CSS中制作图片背景。 3种简单的方式

将后面计划的颜色设置在调色板中。继承人的颜色总是与祖先元素的颜色一致。
问候。在本文中,我想讲述三种方法可以仅使用HTML + CSS将图像放置为整个页面的背景(不使用JS)。

问候。在本文中,我想讲述三种方法可以仅使用HTML + CSS将图像放置为整个页面的背景(不使用JS)。

因此,背景图像的要求如下:

  • 100%宽度和页面高度覆盖
  • 如有必要,背景缩放(根据屏幕的大小拉伸或压缩背景)
  • 粘贴图片的比例(纵横比)
  • 图像以页面为中心
  • 背景不会导致卷轴
  • 该解决方案是最大的跨横梁
  • 除了CSS,没有使用其他技术

将后面计划的颜色设置在调色板中。继承人的颜色总是与祖先元素的颜色一致。

方法1

在我看来,这是最好的方法,因为它是最简单,简洁而现代的。它使用CSS3属性 背景大小。 我们适用于标签 HTML. 。确切地 HTML. , 但不是 身体。 因为其高度大于或等于浏览器窗口的高度。

安装固定和居中的背景,然后使用它调整其尺寸 背景尺寸:封面 .

html { 

背景图片:URL(图像/ background.jpg);

背景 - 重复:无重复;

背景位置:中心中心;

背景 - 附件:固定;

-Webkit-背景 - 大小:封面;

-moz-背景尺寸:封面;

-o-背景 - 大小:封面;

背景尺寸:封面; 
} 

演示

此方法有效

  • Chrome(任何版本)
  • 歌剧10+。

Firefox 3.6+

Safari 3+。

IE 9+

为了快速加载图像,只能从经过验证的托管提供商将网站放置,例如Beget.com 
用户和搜索引擎喜欢快速网站。 

背景图片:URL(图像/ background.jpg);

方法2.

此方法提供了IMG元素的使用,其大小将根据浏览器窗口的大小而变化。要将图像拉伸到全屏,需要设置最小高度和宽度,值为100%。因此,图像没有压缩到较小的尺寸而不是原始尺寸,以相同的图像的值安装min-宽度。

如果窗口宽度小于图像的宽度,则媒体查询将用于对齐中心的背景。

继承。

<img src =“/ movellut background.jpg”class =“background”/>

img.Background { 最小高度:100%; 最小宽度:640px; 宽度:100%; 身高:自动;

位置:固定; 顶部:0; 左:0;

/ *取决于图像的大小* /

@media屏幕和(max-width:640px){ img.bg { и 左:50%; 边缘左:-320px; } } } 演示

继承父元素的所有特征

此方法适用于:

任何版本的好浏览器(Chrome,Opera,Firefox,Safari) IE 9+ и 方法3。 . 另一种方式如下:将图像<img />固定到页面的左上角,并使用min-width和min-height属性延伸100%,同时保持纵横比。 TRUE,通过这种方法,图片不居中。但是,在<div />中包装的图片解决了这个问题,我们制作了窗口大小的2倍。和图像本身我们伸展并放在中心。 <div类=“background”> <img src =“/ moverture/chorture.jpg”/>

</ div> div.background { <div类=“background”> 位置:固定;

TOP:-50%;

左:-50%; } 宽度:200%; 身高:200%; }

img { 位置:绝对; 顶部:0;

左:0; 右:0; :

底部:0;

保证金:汽车; 最小宽度:50%; 最高高:50%; } .

此方法在良好的浏览器和IE 8+中工作。

我希望这些信息对您有用。就个人而言,我经常使用这些方法,特别是首先。当然还有其他方法可以用CSS将图像放在后面的背景上。如果您了解它们,请分享,请评论。 设置页面颜色和/或页面的图片或单独的项目足够简单。主要是要知道在哪里以及如何完成,以及具有颜色代码和/或背景图片。从本文中可以学习很多新事物,但我专门为初学者创建了它。因此,一切都会尽可能短,并同时详细详细。主要是,您不仅会收到整体演示和现成的例子,还会理解如何在HTML中制作背景。 要在HTML中设置背景,请使用中间doctype 我将从这个事实开始 HTML5。 无法设置网站的背景。此功能决定忍受CSS。因此,如果您计划在下面使用,并且您希望获得有效 » (正确的) 代码,您需要留在文档的转换类型。为此,您的网页应以以下行开头: <!doctype html public“ - // w3c // dtd html 4.01 » 过渡 // en“”http://www.w3.org/tr/html4/loose.dtd“>

实际课程的时间

网页上的背景如何? (#)如果您认为它,让我们了解背景是如何创建的。应该指出这里的第一件事 - 这是差异

背景颜色

背景图片

。在开始时

背景颜色 左:50%; 哪个泛组所有可用页面空间或其元素。重复在它的顶部 背景图片 }

。在视觉上,这可以描绘如下: 位置:绝对; 顶部:0;

HTML文档及其元素的背景

在令人失望的背景控制的主要元素之后,以及它们的属性,直接进入特定示例的分析。在下面显示的程序代码中,我尝试启用所有描述的元素。

你需要知道的第二件事是之间的区别

文件的主体 右:0; :

文件的要素

文件的主体

在网页标签的HTML代码中表示

身体。 其中包括网页的所有内容。显然,文档的文档的背景不能是透明的。如果未指定文档主体的背景,则使用浏览器设置中指定的默认值。 页面元素 在标签里面 }

。值得注意的是,您可以使用HTML设置颜色和/或背景图片到文档的所有元素。例如,可以仅针对表指定背景图像。默认情况下,它们通常具有透明的背景。 位置:绝对; 顶部:0;

属性bgcolor创建背景颜色

为了问

该文档或其元素属性属性 身高:200%; и 背景图片 BGColor. ,例如: <body bgcolor =“#ec008c”>

<! - 文件正文 - >

</ body>

在这种情况下,我们将页面的背景颜色设置为整体。但是如何在标记中设置表格的背景颜色的示例 桌子 <table bgcolor =“#ec008c”> <tr> <td>背景</ td> </ tr> </ table>

值得注意的是,还可以为标签中的行指定表中的背景颜色

TR. 以及他们在标签中的细胞 TD。

如何找出颜色代码? 您可能已经注意到HTML中的颜色设置为特殊 代码 HTML. ,例如:

#EC008C。

  • 。为了找出代码,您需要使用其中一个图形编辑器的颜色。例如,在photoshop中,您可以使用“
  • EyeDropper工具。
  • (吸管)

从图片中的一个点获得颜色。然后,您需要单击工具栏上的生成颜色,并在打开的窗口中“

颜色选择器 (颜色选择) 复制颜色代码。 我注意到你注意到这个代码没有格子标志的事实 在开始时,需要手动添加此标志。

您还可以使用许多在线服务,例如: 
他们的工作原则甚至更容易 - 单击所需的颜色并获取IT代码。 创建背景图像的属性背景 以及在背景颜色和情况下的情况下
您需要使用特殊属性,即 
背景。 
<body background =“2014/06 / bg.jpg”>

В HTML. 在这种情况下,我们向整个页面询问页面的背景图片。值得注意的是,由于图片大小的局限性,它将重复,例如: 如您所见,当重复时,图片之间的过渡是明显的。因此,经常使用特殊图片,考虑到这一刻。 但是如何为表中设置背景图片的示例,在标签中

<table background =“2014/06 / bg.jpg”> <tr> <td>文本包含背景</ td> </ tr> </ table> HTML. 值得注意的是,可以仅将背景图像设置为整个和/或其单独的单元格。对于一个字符串,它将无法正常工作。 创建背景图像的属性背景 .

绝对和相对路径背景图片 (颜色选择) 单独值得关注 地址背景图片 。在这种情况下,使用图像的相对路径,即地址在图像文件的位置指示到网页文件。此选项不能特别成功。最好使用图片的绝对路径,即

它的完整网址 <body background =“/ images / bg.jpg”> .

在这种情况下,您将没有伴随的问题。有关它的更多信息,您可以在此阅读。

让我们总结一下 
使用属性 在道德上过时了,因为对于HTML代码的有效性,您必须使用过渡 doctype。

。要在HTML中设置背景颜色,请使用您在图形编辑器中找出的特殊代码或使用特殊的在线服务。背景图片在分配的区域的尾部复制,位于背景颜色的顶部。要指定背景图片,最好使用其完整的URL。我有一切。谢谢你的注意力。祝你好运!

短链接:http://goo.gl/03tsnz 如何为网站制作背景? 如果她的地板升起,任何房间都会更好地看起来更好。你的网站更糟糕?也许是时候了他的地板“
  • »昂贵的优雅手工宫。我们将更多地了解如何为网站制作背景:
  • 恰好的是,该网站的旧设计已经到来。我想要一些新鲜和美味的东西。如果你用自己的双手烹饪,那么新的设计将是这样的。
  • 但要完全改变自己的资源设计 - 事情是忘恩负义的。是的,不是每个人都有关于这个的事情。“
  • 削尖

“手。因此,它最容易刷新旧模板,更改资源背景的颜色或其背景图像。

有几种方法可以在网站上更改背景。这使用了机会。 
CSS。 或者 。但是,许多用于与背景合作的属性在这些Web技术中具有相同的应用程序和方法。
  • 作为背景,您可以使用多个项目: 颜色; ;
  • 背景图片;
  • 质地图像。 我们将更详细地处理每个人的使用。 为了设置站点的后台的颜色,使用该属性。

背景颜色。

样式属性 

风格。 。也就是说,要为网页设置基本颜色,您需要在<body>标记内注册它。例如: <body style =“背景颜色:#55d52b”> <p>网站的背景#55d52b </ b> </ body>

除了十六进制颜色代码之外,该值还以关键字格式支持或

RGB。 

。例子:

<body style =“背景 - 颜色:RGB(51,255,153)”> <p> RGB网站的背景(23,113,44)</ p> </ body> <body style =“背景颜色:绿色”> <p>绿色网站的背景</ p> </ body> 与剩余两种方式相比,使用关键字设置背景颜色具有许多限制。

为设置颜色支持总共16个关键字。这里是其中的一些:

白色,红色,蓝色,黑色,黄色 其他。 因此,为了设置网站的背景

最好使用十六进制格式或 

除了选择颜色外,还提供其他设置。如果属性 设定值 透明

页面的背景将变得透明。默认情况下,此值分配给此属性。 现在考虑一个超文本语言的可能性来安装网站的背景模式。可以使用该属性。 背景图片。

例子: 

<body style =“背景 - 图片:URL(IMG_1809.jpg)”> </ body>

从代码可以看出,图像绑定通过路径发生

URL.

张贴在括号中。但并非所有的照片都变得如此之大,以便用尺寸填充屏幕的整个区域。让我们看看如何显示较小的数字。

假设我们正在开发关于诗歌的网站,作为您需要使用Pegasus的图像的基板。翅膀的马将使诗人的创造性思想的自由来归功于诗人!

我们需要图像在屏幕中间显示一次。但是,不幸的是,浏览器不了解我们的崇高欲望。随着屏幕区域可容纳的次数,为网站的背景显示一个较小的图片,可以容纳:

可能有四个带有诗人的微笑马,这对于灵感来说是过多的。因此,禁止克隆我们的Pegasus。使用该物业

背景 - 重复。 。可能的值: 重复-X - 水平背景图像重复;

因此,我们促进了从两张图片中设置后台的任务:动画和常规图像。在这种情况下,GIF动画将是固定的,并且绘图与页面的内容一起滚动。

重复 - y - 垂直;

重复 - 在两个轴上;

没有重复 - 禁止重复。

在列出的选项中,我们对最后一个感兴趣。在更改网站的背景之前,我们将其使用它在您的代码中:

<body style =“背景 - 图片:URL(3.jpg);背景 - 重复:无重复”> </ body>

但是,当然,如果我们的Letow位于屏幕中间,那就更好了。财产

背景位置 只是旨在将背景图案定位在页面上。以几种方式设置位置坐标:
。也就是说,要为网页设置基本颜色,您需要在<body>标记内注册它。例如: 关键词(
<body background =“/ images / bg.jpg”> 顶部,底部,中心,左,右)
或者 百分比 - 倒计时从左上角开始;
如果她的地板升起,任何房间都会更好地看起来更好。你的网站更糟糕?也许是时候了他的地板“ 以衡量单位(
(颜色选择) 像素
)。 我们使用最简单的居中选项:

<body style =“背景 - 图片:URL(3.jpg);背景 - 重复:无重复;背景位置:顶部中心”> </ body>

滚动时需要修复图形的位置。因此,在制作网站的图片之前,请使用特殊属性。

背景附件。

。有效值:<ul> <li>滚动; </ li> <li>固定。</ li> </ ul>

我们需要最后的含义。现在我们示例的代码将如下所示:[/ html] 
<body style =“背景 - 图片:URL(3.jpg);背景 - 重复:无重复;背景位置:顶部中心;背景 - 附件:固定”> </ body> 

在第一个例子中,对于背景,我们使用了一个大而美丽的沙漠景观。但对于这样的美,你必须支付全额。高质量的图像的重量可以达到几兆的兆字节。

此卷不会影响浏览器页面的下载速度与Internet的高速连接。但是移动互联网呢,使用下载几个“

“会花很多时间吗?

“会花很多时间吗? 使用纹理背景解决了所有这些问题。它使用一个小图像作为纹理的模式。即使在其多重重复的条件下,模式也仅加载一次。

为网站创建一个深色背景 身体。 Photoshop。 身体。 ,以长1200像素的条带的形式创建图像,宽度为15像素。然后我们使用一个简单的黑白渐变,并将生成的纹理连接到站点页面:

<body style =“背景图像:URL(1.png);颜色:RGB(0,51,204)”> </ body>

为清楚起见,我们添加了文本并使用属性设置其颜色。 身体。 颜色 身体。 。这就是发生的事情:

  • 身高:200%; 上述所有属性也适用于级联样式纸张。创建网站的背景
  • 背景图片 CSS。
  • 通过重写我们之前的示例之一的代码: <head> <title>文档Untitled </ title> <style type =“text / css”> body {background-overtic:url(3.jpg);背景 - 重复:无重复;背景位置:顶部中心;背景 - 附件:固定;} </ style> </ head> <body> </ body>
  • 结果将是相似的。 好吧,我们看了所有的选择,如何更改网站上的背景。现在它仍然只是为了创造未来地毯的图画并将其传播到资源页面上。但这是你的手。
  • 祝大家学习和学习新的东西!在开发创作者懒得安排页面的背景时,你有没有注意到网站的外观?我转过身来。它看起来很屠杀。通常,由于不同类型的信息之间缺乏通常的分离,它混合并简单地消失了进一步查看这种Web资源的欲望。 因此,这种麻烦发生在你的项目中,我决定写一篇关于这个主题的文章:“如何在HTML中制作页面的背景。”阅读出版物后,您将学习,使用您可以设置背景设计的工具,如何制作背景固定或更改,并且更多,这将有助于使您的网站具有吸引力。现在让我们开始!
  • 用于设置背景网页的基本工具 要设置背景图像,Web语言开发人员提供了属性背景。它可以在HTML和CSS中提供。
  • 在标记语言中,这是身体标签的属性,并且在样式表中 - 一个通用属性,允许您同时设置最多5个后部的特征。背景技术是一个相当灵活的元素,可用于任务作为颜色,彩色图片甚至动画。 因此,要通过单元安装背景图像HTML <BODY>,它足以编写这样的代码:
  • <body background =“文件地址”> ... </ body> 而不是“文件地址”单词插入图片的路径。
  • 但是,通知!如果以后台的形式,您要查看从调色板指定的Monochon Canvas,那么这是使用BGColor属性完成的。 例如,<body bgcolor =“#000000”> ... </ body>,我们向我们的网站询问了一个黑色背景。
  • CSS和HTML中的颜色由英文单词(例如,红色)设置,或者是由它之后的符号#和六个字符组成的特殊代码(例如,#ffdab9)。 在为开发人员键入专用软件产品中的第二个选项时,调色板将自动出现在您面前。如果您刚开始学习这些Web语言,那么颜色代码可以在Internet上施加。

背景作为级联样式桌子的财产 身高:200%; :

它设置或在具有CSS样式的单独文件中,或在<style>元素中。使用此属性,您可以安装背景模式或颜色,请指定页面上的起始位置,设置重复和固定图像。为了提高清晰度,我在表中进行了定义。 

参数 目的

用于安装固定或滚动图像以及站点的内容。发生修复,滚动和继承

设置背景图像。它可以与颜色同时表示。然后将显示后者,直到完全加载图像。

设置上一个参数的对象的初始位置。水平地表示正确,左和中心,垂直底部,顶部和中心。此外,您可以继承百分比,像素和其他尺寸的位置(继承) 

使用背景图像属性时应用。规定如何重复图像。您可以指定2个值:对于水平和垂直。有特点:无重复,重复,重复-x,重复y,继承,空间

Добавить комментарий