首页IT科技网页设计怎么添加css(HTML/CSS设置网页背景)

网页设计怎么添加css(HTML/CSS设置网页背景)

时间2025-08-05 06:42:30分类IT科技浏览4113
导读:目录...

目录

一               、HTML设置网页背景

1.基础设置

 2.背景颜色

3.背景图片

二                      、CSS设置网页背景

一       、HTML设置网页背景

< body >体中使用backgroundstyle来设置

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

1.在选择器body体中设置好背景样式(很简单              ,可以看注释        ,属性基本与HTML相同)

2.在HTML中引入该css设置(<link rel="stylesheet" href="style.css">)

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

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
python名称中的下划线(python命名关键字参数的使用注意)