html如何设置背景图片。两招教会你

2022/10/13 4:23:52

编程Tag： HTML5

本文主要是介绍html如何设置背景图片。两招教会你，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在html中，可以通过给body标签设置css background或background-image样式来把图片作为背景，语法格式“background/background-image:url(“图片路径”);”。

html文档中可以使用css background或background-image属性将图片设置为背景，background可以在一个声明中设置所有背景属性，background-image指定要使用的一个或多个背景图像

background可以设置的属性分别是：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 URL（smiley.gif); 是允许的。

示例：把图片作为背景

<html>
<head>
<style type="text/css">
body
{ 
background: url(bg.jpg) ; 
/*background-image: url(bg.jpg);*/
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>

效果图：
这是多张图片平铺，如果想要一张图片占全屏，可以使用background-repeat属性，或在background属性上添加no-repeat值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            body {
                /*background: url(bg.jpg) no-repeat;*/
                background-image: url(bg.jpg);
                background-repeat:no-repeat;
            }
        </style>
    </head>
    <body>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
        <p>这是一些文本。</p>
    </body>
</html>

效果图：

这篇关于html如何设置背景图片。两招教会你的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

html如何设置背景图片。两招教会你

相关编程文章