您的位置：首页 > Web前端 > CSS

css3 backgound背景的一些用法和background-position用法

2015-08-30 01:50 701 查看

body{background:url(images/haoroomsicon.jpg);
background-size: 60px 100px;
-moz-background-size:60px 100px;
padding-top: 80px;
background-repeat: no-repeat;}
#shadow{border-bottom: 1px solid #333; height: 40px;width: 100%;box-shadow: 0 1px 1px 0 #dfdfdf;}

</style>

</head>

<body>
<p>这是上边的小图片,backgoundsize:是背景图片的大小的设置</p>
<p style="background:blue;width:200px;height:200px;">这是原生图片</p>
<div id="shadow"></div>
</body>

代码中backgound-size就是设置了bodY的背景，只不过背景是张图片，大小：X宽度,Y高度定死了，并且没有平铺。

backgound-size: perscentage; 百分比表示（父级的）

backgound-size:cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

backgound-size:contain; 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-origin:border-box;/padding-box/content-box: 内容填充在哪些位置。

bakgound-clip:border-box;/padding-box/content-box: 内容剪切在哪些位置。

background-position:x方向，y方向；{负值则是向相反方向}

下面的网址更详细：
http://www.qianduan.net/everthing-about-css-background/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

css3 backgound背景的一些用法 和background-position用法

css3 backgound背景的一些用法和background-position用法