• 欢迎访问夜影小窝网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入夜影小窝 QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏夜影小窝吧

自学CSS技术(二)

WEB技术 yyhouse 3个月前 (04-24) 175次浏览 已收录 2个评论 扫描二维码
文章目录
[隐藏]

CSS 背景

CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
background-color (属性背景颜色)
background-image (属性背景图片)
background-repeat属性值说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承
background-attachment属性值说明
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
background-position(设置背景图像起始位置的CSS样式属性)

示例说明:设置一个不重复居中的图片背景
body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}

背景颜色

background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
CSS中,颜色值通常以以下方式定义:
十六进制 – 如:”#ff0000″
RGB – 如:”rgb(255,0,0)”
颜色名称 – 如:”red”

body {background-color:#b0c4de;}

背景图像

background-image 属性描述了元素的背景图像.
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

body {background-image:url('paper.gif');}

背景图像 – 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:
当使用简写属性时,属性值的顺序为::
background-color
background-image
background-repeat
background-attachment
background-position

白色背景图片不重复在右上角
body {background:#ffffff url('img_tree.png') no-repeat right top;}

转载请注明:来源于【夜影小窝】。文章标题:自学CSS技术(二),文章链接:https://www.yeyhome.com/356.html
喜欢 (4)
[327982852@qq.com]
分享 (0)
yyhouse
关于作者:
90后,从事弱电安防智能化工程,包含监控系统,楼宇对讲系统,LED系统,广播音箱系统,停车场系统,楼宇对讲系统喜欢分享捣鼓有趣的代码。。。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 菜鸟一个跟着你的文章学习学习。呵呵签到成功!签到时间:2019-04-24 13:22:30,每日打卡,生活更精彩哦~
    小白2019-04-24 13:24 回复 Windows 7 | Chrome 63.0.3239.132
  2. 你这咱评论了,需要刷新才能显示
    梦想2019-04-25 22:13 回复 Mac OS X | Safari浏览器 604.1
×
订阅图标按钮