提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > background-size属性怎样用【css教程】,background-size属性,CSS3

background-size属性是用来设置背景图片尺寸大小的,能够经由过程长度值或百分比来设置图片大小,或许经由过程cover和contain来对图片举行伸缩设置。

CSS background-size属性

作用:划定背景图片的尺寸。

申明:在 CSS3 之前,背景图片的尺寸是由图片的现实尺寸决议的。在 CSS3 中,能够划定背景图片的尺寸,这就许可我们在差别的环境中重复运用背景图片。

语法:

background-size: length|percentage|cover|contain;
形貌
length

设置背景图象的高度和宽度。

第一个值设置宽度,第二个值设置高度。

假如只设置一个值,则第二个值会被设置为 "auto"。

percentage

以父元素的百分比来设置背景图象的宽度和高度。

第一个值设置宽度,第二个值设置高度。

假如只设置一个值,则第二个值会被设置为 "auto"。

cover

把背景图象扩大至足够大,以使背景图象完整掩盖背景地区。

背景图象的某些部份或许没法显现在背景定位地区中。

contain 把图象图象扩大至最大尺寸,以使其宽度和高度完整顺应内容地区。

CSS background-size属性运用示例

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(https://img.ki4.cn/upload/article/000/000/024/5c513adf97e86533.jpg);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}

</style>
</head>

<body>
<p>上面是减少的背景图片。</p>

<p>原始图片:<img src="https://img.ki4.cn/upload/article/000/000/024/5c513adf97e86533.jpg" alt="Flowers"></p>

</body>
</html>

效果图:

以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。更多精彩内容人人能够关注ki4网相干教程栏目!!!

以上就是background-size属性怎样用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"background-size属性怎样用【css教程】,background-size属性,CSS3"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线