background

日期:2021-03-06 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

设定情况照片的尺寸,以长度值或百分比显示信息,还能够根据cover和contain来对照片开展伸缩。

英语的语法:

background-size: auto | <长度值> | <百分比> | cover | contain
赋值表明:

1、auto:默认设置值,不更改情况照片的初始高宽比和宽度;

2、<长度值>:成对出現如200px 50px,将情况照片宽高先后设定为前面两个值,当设定1个值时,将其做为照片宽度值来等比放缩;

3、<百分比>:0%~100%之间的任何值,将情况照片宽高先后设定为所属元素宽高乘之前面百分比得出的标值,当设定1个值时同上;

4、cover:说白了为遮盖,将要情况照片等比放缩以铺满全部器皿;

5、contain:容下,将要情况照片等比放缩至某1边紧贴器皿边沿为止。

提醒:大伙儿能够在右侧的编写对话框键入自身的编码尝试不一样赋值的实际效果。


拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<title>情况照片尺寸</title>
<style type="text/css">
.demo {
background: url(<a href="http://static.mukewang.com/static/img/logo_index.png">http://static.mukewang.com/static/img/logo_index.png</a>) no-repeat;
width: 300px;
height: 140px;
border: 1px solid #999;
background-size:cover;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>

上一篇:CSS的1些程序编写标准总结 返回下一篇:没有了