200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 网页制作过程中如何将本地图片设置为背景并且可调大小 – CSS – 前端 css3新增

网页制作过程中如何将本地图片设置为背景并且可调大小 – CSS – 前端 css3新增

时间:2024-07-05 08:52:07

相关推荐

网页制作过程中如何将本地图片设置为背景并且可调大小 – CSS – 前端 css3新增

利用这个属性:background-size

设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。

语法:

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

取值说明:

1、auto:默认值,不改变背景图片的原始高度和宽度;

2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;

3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;

4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;

5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。

提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

示例代码:

<!DOCTYPE html><html><head> <meta charset=”utf-8″><title>背景图片大小</title><style type=”text/css”>.demo { background: url(/static/img/logo_index.png) no-repeat; width: 300px; height: 140px; border: 1px solid #999; background-size:cover;}</style> </head> <body><div></div></body></html>

网页制作过程中如何将本地图片设置为背景并且可调大小 – CSS – 前端 css3新增的伪类选择器

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。