HTML/CSS设置网页背景-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML/CSS设置网页背景。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、HTML设置网页背景

1.基础设置

2.背景颜色

3.背景图片

二、CSS设置网页背景

一、HTML设置网页背景

< body >体中使用background和style来设置

1.基础设置

<html>
         <head>
	     <meta charset="UTF-8">
	     <title>HTML设置页面背景</title>
         </head>
         <body background="01.jpg" <!--background=".../...jpg'" 存放图片的路径-->
               style="background-repeat:no-repeat;<!--设置图片不重复显示-->
               background-attachment:fixed;<!--设置图片的位置固定-->
               background-size:100% 100%; "><!--设置图片达到窗口100%的比例-->
         </body>
</html>

效果演示

HTML/CSS设置网页背景

2.背景颜色

通过style属性：

backgroud-color:transparent color

transparent : 背景色透明 color : 指定背景颜色

颜色的表达方式有四种：

①直接写颜色单词

②#+十六进制数

③rgb(x,x,x)

④rgba(x,x,x,x)—代表颜色的透明度

3.背景图片

background-img:url()：引入图片

background-repeat:

平铺方式：

        （repeat（默认）x轴y轴都平铺、

        repeat-x沿x轴方向重复填充、

        repeat-y沿y轴方向重复填充、

        no-repeat不重复）

backgroud-size:

图片大小：

        （宽高（设置具体值或者Auto）、

        cover铺满整个盒子，可能会溢出，

        contain在不溢出的前提下尽量铺满屏幕）

background-position：length/position

        背景图片定位（x轴y轴用于调整背景图片位置或显示某个位置）
        如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。

        第二个值是纵坐标。值可以写英文，可以写数字，也可以是负数。

        该属性定位不受内边距属性（padding）设置的影响。

二、CSS设置网页背景

１.在选择器ｂｏｄｙ体中设置好背景样式（很简单，可以看注释，属性基本与HTML相同）

２.在HTML中引入该ｃｓｓ设置（<link rel="stylesheet" href="style.css">）文章来源地址https://www.toymoban.com/news/detail-421422.html

body{
    font-family: sans-serif;/*字体加粗*/
    background-image: url("03lg.jpg");/*背景图片*/
    background-repeat: no-repeat;/*图片不重复*/
    overflow: hidden;/*溢出隐藏*/
    background-size: cover;/*背景覆盖窗口*/
}

到了这里，关于HTML/CSS设置网页背景的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！