前端大本营

HTML5,CSS3,Responsive,资料站

background-size 说明

属性,指定背景图片尺寸大小的时候使用。<规定背景图像的尺寸> background-size 属性值为百分比的时候,需要填两个值,顺序为宽,高,只填一个值的场合另一个值自动为auto,值不可以为负数

属性值

auto 背景图片尺寸自动设置(默认值) contain 保持图片横纵比例,按照背景的最大尺寸背景图片进行平铺<把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。> cover 保持图片横纵比例,将背景图片扩大到背景的最大尺寸。<把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。> length长度 背景图片的宽高手工指定。<设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。> percentage百分比 根据背景范围来指定背景图片宽高的百分比<以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。>
※<>内表示的内容是从其他网站转录的内容。 实例代码
<html>
<head>
<title>background-origin</title>
<style>

p.sample1 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000;	
background-image :url("bg_flower.png");
background-size:contain;
}

p.sample2 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000; 
background-image:url("bg_flower.png");
background-size:cover;
}

p.sample3 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000; 
background-image:url("bg_flower.png");
background-size:10px 10px;
}

p.sample4 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000; 
background-image:url("bg_flower.png");
background-size:50% auto;
}

</style>
</head>
<body>
<p class="sample1">background - size:contain;</p>
<p class="sample2">background - size:cover;</p>
<p class="sample3">background - size:10px 10px;</p>
<p class="sample4">background - size:50% auto;</p>	
<p>


</body>
</html>


实例图 background-size 指定背景图像尺寸 —— CSS3 参考 背景
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 背景 | background-size 指定背景图像尺寸 —— CSS3 参考 背景已关闭评论

background-origin说明

属性,指定背景图片指定位置的时候使用。<相对于内容框来定位背景图像> background-attachment属性值为fixed的时候,background – origin属性将失效

属性值

padding-box 背景位置相对于padding来定位(默认值)<背景图像相对于内边距框来定位。> border-box 背景位置相对于border-box来定位<背景图像相对于边框盒来定位。> content-box 背景位置相对于内容范围来定位。<背景图像相对于内容框来定位。>
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>background-origin</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>

<body>
<style>
p.sample1 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000;	
background-image:url("bg_check.png");
background-origin:padding-box;
}

p.sample2 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000; 
background-image:url("bg_check.png");
background-origin:border-box;
}

p.sample3 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000; 
background-image:url("bg_check.png");
background-origin:content-box;
}
</style>

<p class="sample1">background -origin:padding-box;</p>
<p class="sample2">background -origin:border-box;</p>
<p class="sample3">background -origin:content-box;</p>	

</body>
</html>

实例图 background - origin指定背景范围 —— CSS3 参考 背景
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 背景 | background-origin 定位背景图像 —— CSS3 参考 背景已关闭评论

background-clip 说明

background-clip 属性,指定背景图片所作用的范围。 *不支持Firefox3以下的浏览器

属性值

border-box 背景充满整个边框以内的范围 (默认值)<背景被裁剪到边框盒。> padding-box 背景填充到padding内部,不包含padding范围<背景被裁剪到内边距框。> content-box 背景填充指定大小的范围。<背景被裁剪到内容框。>
※<>内表示的内容是从其他网站转录的内容。 实例代码
<style>
p.sample1 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000; 
background-image:url("bg_flower.png");
background-clip:border-box;
}

p.sample2 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000; 
background-image:url("bg_flower.png");
background-clip:padding-box;
}

p.sample3 {
width:400px; height:80px; padding:15px;
border:dashed 20px #000000; 
background-image:url("bg_flower.png");
background-clip:content-box;
}
</style>


<body>
<p class="sample1">background - clip:border-box;</p>	
<p class="sample2">background - clip:padding-box;</p>
<p class="sample3">background-clip:content-box;</p>	
<p>
以下为实例图<br>
<img src="bg_flower.png" alt="背景画像" border="1">
</p>

</body>
</html>
实例图 background-clip 指定背景范围 —— CSS3 参考 背景
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 背景 | background-clip 指定背景范围 —— CSS3 参考 背景已关闭评论