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%; ">
- 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设置()
- body{
- font-family: sans-serif;/*字体加粗*/
- background-image: url("03lg.jpg");/*背景图片*/
- background-repeat: no-repeat;/*图片不重复*/
- overflow: hidden;/*溢出隐藏*/
- background-size: cover;/*背景覆盖窗口*/
- }
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。
在线投稿:投稿 站长QQ:1888636
后台-插件-广告管理-内容页尾部广告(手机) |