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

推荐手册

CSS3 背景

CSS3 背景
CSS3中包含了多个新的背景属性,它们提供了对背景更强大的控制,可以规定背景尺寸的大小以及规定背景图片的定位区域。
编辑:前端控 前端控 更新时间:2019-02-01 10:41:48

CSS3 背景

CSS3中包含了多个新的背景属性,它们提供了对背景更强大的控制。

浏览器支持:

属性
                                                              浏览器支持
background-size

        

                             
background-origin

        

                             

background-size 属性

background-size 属性规定背景图片的尺寸。

在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的,但在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片

通过像素或百分比规定尺寸,如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度

实例

body{
    background:url(images/1.jpg);
    background-size:450px 300px;
    background-repeat: no-repeat;
}

运行实例 »

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

效果图:

background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域

实例

div
{
border:1px solid black;
padding: 40px;
background-image:url('images/111.jpg');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
.demo{
	background-origin:border-box;
}

运行实例 »

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

效果图:


新的背景属性

属性描述CSS版本
background-clip  规定背景的绘制区域3
background-origin规定背景图片的定位区域3
background-size规定背景图片的尺寸 3  
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号