如何设置HTML背景图片

部分 1

部分 1 的 5:新建文档

WH.shared.addScrollLoadItem(’51a5dcd25f891c4bb98ec84154468eb8′)

WH.performance.clearMarks(‘image1_rendered’); WH.performance.mark(‘image1_rendered’);{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/42/2627945-1-1.jpg/v4-460px-2627945-1-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/4/42/2627945-1-1.jpg/v4-728px-2627945-1-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
1
创建一个文件夹用来存放HTML文件和背景图片。在电脑上创建并命名一个文件夹,方便日后查找。
你可以为文件夹随意命名,但是使用HTML时,最好养成习惯,使用简短的单个单词来命名文件和文件夹。WH.performance.mark(‘step1_rendered’);

WH.shared.addScrollLoadItem(‘3734387beaa55f4326181f011f443661’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a0/2627945-2-1.jpg/v4-460px-2627945-2-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/a/a0/2627945-2-1.jpg/v4-728px-2627945-2-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
2
将背景图片放入HTML文件夹。将你想要用作背景的图片放入HTML文件夹。
如果你不在意网页是否能在网速较慢的旧设备上运行顺畅,可以使用高分辨率图片来作为背景。选择带有重复图样的简单图片作为背景也不错,因为你可以在这种背景下阅读任何文本。
如果你没有图片,可以下载免费的背景图。下载好图片,将它放入创建好的HTML文件夹中。

WH.shared.addScrollLoadItem(‘331abe0f0e1ab507c8d8c88d0e418ffc’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/e0/2627945-3-1.jpg/v4-460px-2627945-3-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/e/e0/2627945-3-1.jpg/v4-728px-2627945-3-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
3
创建一个HTML文件。打开文本编辑器,然后新建一个文件。将文件另存为index.html。
你可以使用任何你想要的文本编辑器,系统自带的文本编辑器也可以,如Windows的记事本,以及Mac OS X的文本编辑器。
如果你想要使用能处理HTML的文本编辑器,点击这里下载Windows、Mac OS X、Linux操作系统都可以使用的文本编辑器Atom。
如果你使用的是Mac电脑的文本编辑器,在开始编写HTML文件之前,单击“格式”菜单,然后单击“生成纯文本”。该设置会确保HTML文件在网页浏览器中正常加载。
诸如Microsoft Word之类的文字处理程序并不适合编写HTML,因为它们添加了一些不可见的字符和格式,这些字符和格式可能会破坏HTML文件,让它无法在网页浏览器中正确显示。

WH.ads.addBodyAd(‘method_ad_1’)
WH.ads.addBodyAd(‘mobilemethod_ad_1’)广告

部分 2

部分 2 的 5:编写HTML文件

WH.shared.addScrollLoadItem(‘704a6bd3629dd5f538e682d32d82c199’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d9/2627945-4-1.jpg/v4-460px-2627945-4-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/d/d9/2627945-4-1.jpg/v4-728px-2627945-4-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
1
复制并粘贴标准HTML代码。选择并复制下面的HTML代码,然后粘贴到打开的 index.html文件中。

页面标题
body {
background-image: url(” “);
}

WH.shared.addScrollLoadItem(‘6f2525f89e538aec1db782dc56782033’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/4e/2627945-5-1.jpg/v4-460px-2627945-5-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/4/4e/2627945-5-1.jpg/v4-728px-2627945-5-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
2
添加背景图像地址。在index.html文件中找到“background-image: url(” “);”这一行,将光标移到括号之间,然后输入背景图片文件名。确保包含背景图片文件扩展名。

WH.ads.addBodyAd(‘mobilemethod_ad_2′)广告

当你完成的时候,应该是这样的:background-image: url(“background.png”);
当你使用的文件名没有文件路径或地址时,网页浏览器将在网页文件夹中查找指定的图片。如果文件位于文件系统上的另一个文件夹中,则需要为文件添加完整路径。[3]
X
研究来源

保存HTML文件。
WH.shared.addScrollLoadItem(’28a2e15fb58fdd371d40b9a8adb16379’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/94/2627945-6-1.jpg/v4-460px-2627945-6-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/9/94/2627945-6-1.jpg/v4-728px-2627945-6-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}

部分 3

部分 3 的 5:查看HTML文件

WH.shared.addScrollLoadItem(‘173d09b42e13cb1aa09214f54253d1c8’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/72/2627945-7-1.jpg/v4-460px-2627945-7-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/7/72/2627945-7-1.jpg/v4-728px-2627945-7-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
1
在网页浏览器中打开HTML文件。右键单击index.html文件,然后在你选择的网页浏览器中打开它。
当浏览器打开时,如果没有看到图片,确认图片文件名在index.html文件的文本编辑器窗口中拼写正确。
当浏览器打开时,如果你看到的是HTML代码,而不是背景图片,那是因为你的index.html文件被保存为富文本文档。最好还是换一个文本编辑器来编辑HTML文件。

WH.shared.addScrollLoadItem(‘135e8c113a241ac7bf0c8ce36997a647’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f2/2627945-8-1.jpg/v4-460px-2627945-8-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/f/f2/2627945-8-1.jpg/v4-728px-2627945-8-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
2
编辑HTML文件。在文本编辑器窗口中,将光标移至 标签之间,然后输入“Hello world!”。重新加载浏览器窗口,查看背景图片上方的文本。

WH.ads.addBodyAd(‘mobilemethod_ad_3’)广告

部分 4

部分 4 的 5:理解HTML代码

WH.shared.addScrollLoadItem(‘a8399c1bc1ecc3b6aec72ef862830fb7’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6d/2627945-9-1.jpg/v4-460px-2627945-9-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/6/6d/2627945-9-1.jpg/v4-728px-2627945-9-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
1
理解HTML和CSS标签。HTML代码由开始标签和结束标签组成。是主体的开始标签,是主体的结束标签。HTML页面上的每个开始标签都需要有一个结束标签,以便正确显示页面。

WH.shared.addScrollLoadItem(‘001fe0388afc253b4c8fe3aad7d1a3cc’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6e/2627945-10-1.jpg/v4-460px-2627945-10-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/6/6e/2627945-10-1.jpg/v4-728px-2627945-10-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
2
理解DOCTYPE标签。每一个编写规范的HTML页面开头都应该有。该标签是用来告诉浏览器该文件是HTML文件。

WH.shared.addScrollLoadItem(‘0654269d344ed098e459e445f6f94007’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/73/2627945-11-1.jpg/v4-460px-2627945-11-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/7/73/2627945-11-1.jpg/v4-728px-2627945-11-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
3
编辑HTML文件。在文本编辑窗口中,将光标移至 标签之间,然后输入“Hello world!”。重新加载浏览器窗口,查看背景图片上方的文本。

WH.shared.addScrollLoadItem(‘bc16aaa3bad3806c0e1111af41cb70d7’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/af/2627945-12-1.jpg/v4-460px-2627945-12-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/a/af/2627945-12-1.jpg/v4-728px-2627945-12-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
4
理解HTML和CSS标签。HTML代码由开始标签和结束标签组成。是主体的开始标签,是主体的结束标签。HTML页面上的每个开始标签都需要有一个结束标签,以便正确显示页面。

WH.shared.addScrollLoadItem(‘7defb021eac6805c78b604563ccbb9dd’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/9c/2627945-13-1.jpg/v4-460px-2627945-13-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/9/9c/2627945-13-1.jpg/v4-728px-2627945-13-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
5
理解标题标签。 标签是出现在浏览器窗口标题栏中的文本,以及在浏览器标签中显示的文本。</p> <p>WH.shared.addScrollLoadItem(’79fe3e967d1bd097bb3490b24e4f460a’)</p> <p>{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/37/2627945-14-1.jpg/v4-460px-2627945-14-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/3/37/2627945-14-1.jpg/v4-728px-2627945-14-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”</p> <div class='"mw-parser-output"'>“}<br /> 6<br /> 理解样式标签。标签标示出CSS内容。标签内的所有内容都是CSS代码。 </p> <p>WH.shared.addScrollLoadItem(‘c3ac2faa096dc445620746222f5ac378’)</p> <p>{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/eb/2627945-15-1.jpg/v4-460px-2627945-15-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/e/eb/2627945-15-1.jpg/v4-728px-2627945-15-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”</p> <div class="mw-parser-output"></div> <p>“}<br /> 7<br /> 理解主体标签。在标签内输入的任何内容都会显示出来,除了HTML代码或CSS 代码。</p> <p>WH.shared.addScrollLoadItem(‘c5954a1e8e765084594d48d9951904f4’)</p> <p>{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f3/2627945-16-1.jpg/v4-460px-2627945-16-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/f/f3/2627945-16-1.jpg/v4-728px-2627945-16-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”</p> <div class="mw-parser-output"></div> <p>“}<br /> 8<br /> 编辑HTML文件。在文本编辑窗口中,将光标移至 </p></div> <p>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注