4.5 (案例) 背景大小
作者:
柒月柒日晴7 | 来源:发表于
2017-06-08 00:00 被阅读0次
背景大小.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
body{
height: 500px;
}
</style>
背景1
css3背景:透明背景、渐变背景、背景原点控制、背景剪切控制
background : position repeat image color
background-size ： 背景尺寸
length： 长度值指定
percentage： 百分比指定
auto： 真实大小
<!-- cover：等比缩放到完全覆盖容器，背景图像有可能超出容器
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。 -->
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
<style>
body
{
background-image:url(images/5.jpg);
/*background-size: 300px 500px;*/
/*background-size: auto;*/
/*background-size:800px 600px;*/
/*background-size: cover; */
/*等比缩放 可能超过容器%*/
background-size:contain;
/*百分比指定*/
/*background-size: 30% 100%;*/
/*等比缩放 不可能超过容器
继承父元素宽高
*/
/*background-size: auto;*/
/*实际大小*/
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</body>
</html>
本文标题：4.5 (案例) 背景大小
本文链接：https://www.haomeiwen.com/subject/mxczfxtx.html
网友评论