导航:首页 > 图片大全 > css3如何设置图片拉伸
css3如何设置图片拉伸
发布时间：2022-08-12 19:34:10① 请问CSS可以实现背景图片拉伸吗 (即把浏览器放大或缩小后都是显示一个完整的不重复的图片)
单独CSS的话不能实现，需要用到js脚本，给你一个实例好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>
</head>
<body>
<div class="content-width">
<p><img src="/down/js/images/12567247980.jpg"/></p>
<p><img src="/down/js/images/12567247981.jpg"/></p>
</div>
</body>
</html>
② 请问在CSS中单元格背景图片自动拉伸填充
在页面属性中 背景图片下的重复 下拉框中 选择 向X轴扩展或者在 div.css 中 #box{width:height:background:图片地址 repeat-x;}
③ css3 背景图y轴拉伸，x轴重复怎样做到
background-size设置Y轴拉伸
repeat-x设置x轴重复
④ 在css中设置图片的背景图，怎么设置图片纵向拉伸
css中设置背景图拉伸填充，在css2.1之前这个背景的长宽值是不能被修改的。
实际的结果是只能重复显示，可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示。所以一般用作背景图片的有2类：
1.是一整张大图，尺寸和区域大小刚好吻合
2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。
css3出现以后，可以用background-size
属性来实现背景图拉伸填充。
而且这个属性在firefox，chrome，以及ie9上都可以使用。
具体使用方法如下：
背景图尺寸（数值表示方式）：
#background-size{
background-size:200px
100px;
}
背景图尺寸（百分比表示方式）：
#background-size{
background-size:30%
60%;
}
背景图尺寸（等比扩展图片来填满元素，即cover值）：
#background-size{background-size:cover;
}
背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值）：
#background-size{
background-size:contain;
}
背景图尺寸（以图片自身大小来填充元素，即auto值）：
#background-size{
background-size:auto;
}
⑤ 怎样在css中改变图片格式和形状
图片格式代表的是一种资源类型，css是用来修饰网页展现的
css可以通过对控制对图片的宽高或者外层容器的宽高来改变图片大小或者显示部分
在css3中图片是可以修饰容器边框的，这也是改变图片的一种形式
图片可以作为容器背景，控制背景的显示方式来改变图片的形状拉伸、收缩、平铺等
css3中引入了2d、3d转换动画也是图片形状改变的一种展现
当然更多的形状变化方式题主可以参考css手册进行以上基础的进一步扩展
⑥ DIV+CSS，怎样将背景图片拉伸到全屏！！ 谢谢各位了 急呀~~~
拉伸是可以做的,需要用到另外一个属性:
css中设置背景图拉伸填充，在css2.1之前这个背景的长宽值是不能被修改的。 实际的结果是只能重复显示，可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示。所以一般用作背景图片的有2类：
1.是一整张大图，尺寸和区域大小刚好吻合
2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。
css3出现以后，可以用background-size 属性来实现背景图拉伸填充。 而且这个属性在firefox，chrome，以及ie9上都可以使用。
具体使用方法如下：
背景图尺寸（数值表示方式）：
#background-size{ background-size:200px 100px; }
背景图尺寸（百分比表示方式）：
#background-size{ background-size:30% 60%; }
背景图尺寸（等比扩展图片来填满元素，即cover值）：
#background-size{background-size:cover; }
背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值）：
#background-size{ background-size:contain; }
背景图尺寸（以图片自身大小来填充元素，即auto值）：
#background-size{ background-size:auto; }
⑦ css让背景图片拉伸填充的属性
比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。
所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来
控制背景图片的显示的。所以一般用作背景图片的有2类：
1.是一整张大图，尺寸和区域大小刚好吻合
2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。
但是css3出现以后，这个情况被改善了。background-size
属性可以让我们之前的希望成真。
而且这个属性在firefox，chrome，以及ie9上都可以使用。
具体使用方法如下：
背景图尺寸(数值表示方式)：
#background-size{
background-size:200px
100px;
}背景图尺寸(百分比表示方式)：
#background-size2{
background-size:30%
60%;
}背景图尺寸(等比扩展图片来填满元素，即cover值)：
#background-size3{
background-size:cover;
}背景图尺寸(等比缩小图片来适应元素的尺寸，即contain值)：
#background-size4{
background-size:contain;
}背景图尺寸(以图片自身大小来填充元素，即auto值)：
#background-size5{
background-size:auto;
}
⑧ css中如何调整插入背景图片的大小
可以通过cover和contain来对图片进行伸缩。
语法：
background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
(8)css3如何设置图片拉伸扩展阅读：
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怎么定义详情如下
用背景图无法拉伸。
可以用图片，然后用定位把它放到内容的下一层。
<styletype="text/css">
.a{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;}
.b{position:absolute;left:0;top:0;background:#CCC;z-index:99;}
</style>
<body>
<imgsrc="bg.jpg"width="100%"height="100%"class="a"/>
<divclass="b">这里放内容</div>
与css3如何设置图片拉伸相关的资料
- 色差较小的图片如何抠
- 捏面人人物图片大全
- 如何把拍照图片笔记整理成合集
- 电脑如何搜索图片尺寸
- 如何增加剪映图片移动速度
- 脚病的种类图片大全
- 糊涂女儿之图片大全
- 抖音如何背景图片里面加文字
- 图片太大如何导出
- 如何在图片加上3d文字
- 百度上如何上传图片
- 如何把表情包变成图片
- 冬天踢不烂如何搭配裤子图片
- 如何修改表面图片
- 华为麦芒七图片如何导入电脑
- 手机上如何给图片填充颜色
- 如何替换图片中的会标
- 如何在图片上加字不显示文字
- ppt文字如何环绕图片
- 如何用图片替换颜色
- 如何复制整列图片
- 光遇身体重塑如何看多高图片
- 如何搜索图片里的物种
- 怎么做ps如何提高图片像素
- 如何把图片摆上微店里面
- 后背鲫鱼纹身图片大全
- 如何悬浮窗放置图片
- 图片被误删了如何恢复
- 发光少女后期如何让图片变清晰
- 如何画音符符号简笔画图片
- 如何拍眼红的图片
- 春分早上如何拍日出日落好图片
- 孝道文化墙图片大全集
- 泽字帅气图片大全
- ppt图片如何单张下载
- 如何在手淘上保存图片
- 漫画美男图片大全图片
- 龙的logo设计图片大全
- 如何在安卓手机桌面增加图片框
- 孔明灯简笔画图片大全
- 树上的图片如何取出来
- 宝宝常见皮疹图片大全