导航:首页 > 图片大全 > 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如何设置图片拉伸相关的资料
- 不知如何爱你的图片
- 出入平安图片大全
- 如何调节图片里的光线均匀
- 如何移动word里图片
- 小男孩帽子图片大全
- 快手如何自己添加图片
- 在ppt中如何将图片变立体
- 如何使用ps制作黑色背景的图片
- 苹果手机相册如何避免重复图片
- word中如何修改图片的形状
- 给定图片如何修改
- 如何根据图片搜索女明星
- 在excel中如何编辑图片
- 比熊犬造型图片大全
- 如何转笔又简单又酷图片教学
- 电脑截屏图片如何拼图
- 几张图片如何做成固定视频
- 如何给手机图片加文字
- 粘豆画的图片大全
- 激光祛斑结痂图片大全
- 一个版面如何制做多个图片
- 如何将图片背景改为纯色
- 拥抱图片大全
- 人生方向图片大全
- 嗓子哑了图片大全
- 蓝色鲜花图片大全
- word中如何批量调整图片大小位置
- 玉米造型图片大全
- 如何把苹果手机的图片转到新手机
- 女性电动器具图片大全
- 制作数学小报图片大全
- 下载软件图片如何截图
- wps导入的图片如何移动位置
- 最穷的饭菜图片大全
- 图片底色是黑色如何调节
- 微信朋友圈如何只发文字不要图片
- 如何把图片黑色背景换成绿色
- 如何制作图片上的古诗词
- 苹果如何复制图片的问题
- 电视墙山水图片大全
- 如何在视频中添加多个背景图片
- ps如何改变图片中的人物大小