您好!欢迎来到静学网! 注册 登入

  • 静学网专注SEO优化技术视频教程案例分析、算法知识,在这里免费学习到最新的SEO技术,让你轻松通往SEO高工程师级之路,全新的SEO算法将在这里得到解剖。同时静学网提供网站开发、app开发、移动开发、电商、自媒体、行业资讯等内容,丰富及弥补自己的知识体系,让你在未来更具有竞争力。

CSS样式: background属性的使用及详解(一)

SEO优化 SEO资深顾问 次浏览
background是背景的意思,相比大家也知道了,background能够灵活的改变网页背景,让其更具有吸引力,更加的美观。CSS背景属性也比较多,这里一一列举出来,也会在网页开发当中经常使用的,因此希望大家能够记住,记不住也不要紧,用的时候看一下手册就行了。
 
1 background-color 属性应用
 
这个背景属性是用来改变背景颜色的,当然在默认的情况下,背景一般为透明(transparent),如下例子,我要把整个网页变成红色,代码示例如下:
html{ background-color:red;}
颜色可用rgb(255,0,0)或者#f00
 
2 background-image 属性应用
 
这个从单词可以看出什么意思了,就是背景图片,如果你想要你的背景变得更加洵烂一点,可添加一张好看的图片,就比如你觉得你的个人照片很好看,可以用这个属性进行改进。当然background-image默认情况下是没有值得,具体应用如下:
 
body {background-image:url(图片路径);}
background属性
 
3 background-repeat属性应用
 
repeat有重复的意思,background-repeat是背景平铺的意思,其值有五种可能,repeat(默认。背景图像将在垂直方向和水平方向重复。)、repeat-x(背景图像将在水平方向重复。)、repeat-y(背景图像将在垂直方向重复。)、no-repeat(背景图像将仅显示一次。)、inherit(规定应该从父元素继承 background-repeat 属性的设置。),这个属性将和background-image使用,例子:
 
body
background-image: 
url(图片路径);
background-repeat: repeat-x
}
这个图像将水平平铺。
 
4 background-position属性应用
这个属性是定位的意思,结合上面的属性,可任意把图片定位在任何位置,其值有:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
 
当然你也可以用%号来代替或者xpos ypos。例子:
 
body
  background-image:url(' ');
  background-position:center或者50% 50%(就像坐标一样);
}
 
图片将居中
 
下一节将补充background-attachment、background综合书写,还有就是CSS3中的心属性background-clip、background-origin、background-size。
 

静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明CSS样式: background属性的使用及详解(一)
顶一下
(2)
66.7%
踩一下
(1)
33.3%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名: 验证码:点击我更换图片
合作伙伴:
SEO 关键词排名 SEO优化