css中background

日期:2020-09-22 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

background-size的值种类:1个或2个值,这些值既能够是像素px,还可以是百分比%或auto,还能够是特殊值cover, contain。

background-size能够设定2个值,1个为必填,1个为可选。
在其中第1个值用于特定情况图的width,第2个值用于特定情况图的height,假如只给background-size设定1个值,则第2个值默认设置为auto高宽比全自动 (一般默认设置高宽比是auto全自动,自可用內容而增高,一般假如想高宽比自融入无需设定) (cover和contain特殊值以外)。

拷贝编码
编码以下:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px;
}

等额的于:

拷贝编码
编码以下:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px auto;
}

查询实际DEMO: background-size的值界定。当你应用firebug抓取到那个案例连接点时,你会发现第2个值被全自动再加了而且值为auto。自然,你还可以手动式将第2个值设定为auto,随后与该DEMO的案例比照,它们的实际效果将是同样的。

background-size的特殊值:

cover: 维持图象自身的宽高占比,将照片放缩到恰好彻底遮盖界定情况的地区;
contain: 维持图象自身的宽高占比,将照片放缩到宽度或高宽比恰好融入界定情况的地区;
cover值:

拷贝编码
编码以下:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:cover;
}

上例,情况照片将遮盖全部div地区。查询实际DEMO: background-size:cover。

contain值:

拷贝编码
编码以下:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:contain;
}

上例,情况图将放缩到宽度或高宽比的随意1边与div地区融入。查询实际DEMO: background-size:contain。
上一篇:纯css3完成的电脑鼠标悬停动漫按钮 返回下一篇:没有了