HTML/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>

效果演示

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设置网页背景

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

————————————————
版权声明：本文为CSDN博主「turbo夏日漱石」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_62799214/article/details/129464348

本网站内容及资料来源于网络，并不代表本站观点和对其真实性负责，也不构成任何其他建议;部分内容是由网友自主投稿和发布、编辑整理上传，对此类内容本站仅提供交流平台，不为其版权负责;所提供的信息，只供参考之用，不保证信息的准确性、有效性、及时性和完整性;如果您发现网站上有侵犯您的知识产权的内容，请与我们取得联系，我们会及时修改或删除。文章版权归作者所有，原创作品未经允许请勿转载。投诉请联系：admin@chnhonker.com

THE END

前端
# HTML # 网页背景