当前位置:首页 » 背景图片 » css背景图片放大
扩展阅读
饮食ppt背景图片 2025-01-17 15:28:09
好看的姓氏头像图片卡通 2025-01-17 15:26:37

css背景图片放大

发布时间: 2025-01-17 07:56:48

㈠ css中如何调整插入背景图片的大小

可以通过cover和contain来对图片进行伸缩。

语法:

background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */

background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */

background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */

background-size:cover;/* 将背景图片等比缩放填满整个容器 */

background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

(1)css背景图片放大扩展阅读:

CSS背景图片自适应、全屏、填充、拉伸

方法一:js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

</script>

方法二:全浏览器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

㈡ css中的背景图怎么改变大小

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

㈢ css中的背景图怎么改变大小

在css中控制插入背景图片的大小用background-size

background-size使用语法有下面四种情况

background-size: length|percentage|cover|contain

length用法:

background-size:100px; //背景图片显示的宽和高为100像素

background-size:100px 160px;//背景图片显示的宽为100像素,高为600像素

percentage用法:

background-size:60%; //背景图片的显示宽度和高度是图片大小60%;

background-size:60% 80%; // 背景图片的显示宽度是图片大小的60%,高度是80%;

cover用法:

background-size:cover; //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain用法:

background-size:contain; //把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

(3)css背景图片放大扩展阅读

background-size属性浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

参考资料

网络——background(计算机专业术语)