购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS Backgrounds(背景)

CSS Backgrounds(背景)
CSS Backgrounds(背景)属性是用于定义HTML元素的背景,本节给大家简单介绍一下css 背景属性使用和所呈现的效果。
编辑:前端控 前端控 更新时间:2019-02-01 13:35:16

CSS Backgrounds(背景)

CSS 背景属性用于定义HTML元素的背景

CSS 属性定义背景效果:

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

背景颜色:background-color

background-color属性可为元素设置背景色,这个属性接受任何合法的颜色值

实例

body{
	background-color:pink;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

背景图片:background-image

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

实例

body{
	background-image:url("images/33.jpg");
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:



大多数背景都应用到 body 元素,不过并不仅限于此

下面例子为一个段落应用了一个背景,而不会对文档的其他部分应用背景

实例

p{
	background-image:url("images/33.jpg");
}
<p>HTML中文网</p>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 17.jpg


背景重复:background-repeat

属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺

水平方向上

实例

body{
	background-image:url("images/Image 16.jpg");
	background-repeat: repeat-x;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 18.jpg

垂直方向上

实例

body{
	background-image:url("images/Image 16.jpg");
	background-repeat: repeat-y;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 19.jpg

背景图像是否固定:background-attachment

scroll:背景图片随页面的其余部分滚动。这是默认    

fixed:背景图像是固定的    

inherit:指定background-attachment的设置应该从父元素继承    

设置图像是随页面滚动的

实例

body{
	height: 5000px;
	background-image:url("images/Image 16.jpg");
	background-repeat: no-repeat;
	background-attachment:scroll;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

背景定位:background-position

可以利用 background-position 属性改变图像在背景中的位置,它有四个值分别为:left、right、top、bottom。可以通过这些值改变图像背景位置

实例

body{
	height: 5000px;
	background-image:url("images/Image 16.jpg");
	background-repeat: no-repeat;
	background-position: right top;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 21.jpg

CSS背景属性

属性描述
background 简写属性,作用是将背景属性设置在一个声明中
background-color设置元素的背景颜色
background-image把图像设置为背景
background-position设置背景图像的起始位置
background-repeat设置背景图像是否及如何重复
background-attachment 背景图像是否固定或者随着页面的其余部分滚动


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号