A. css中的背景图怎么改变大小
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
B. css问题:如何控制背景图片的大小
1、css2中是无法控制背景图片大小的,如果想实现这种效果,只能是更改图片了。
2、css3中可以通过background-size来控制图片的大小。
background-size属性用法:
background-size:
length|percentage|cover|contain;
1)length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为
"auto"。
2)以父元素的百分比来设置背景图像的宽度和高度。
3)把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4)把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
具体示例可以参考:http://www.w3school.com.cn/cssref/pr_background-size.asp
C. CSS中背景图片的大小
对的,当以<img src="" />形式出现的时候可以有几种种方法实现;
而当采用backgroud形式作为背景的时候,只能通过改变原图了,不过当背景是有规律的渐变色、纹路、图案等时候,可以把图片切小后通过平铺的方式铺满!
D. css中如何调整插入背景图片的大小
一、HTML标签内控制宽度高度
Img标签教程:
1、我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽;
2、我们可以直接在图片标签设置宽度width和高度height,这里需要注意的是HTML img标签内直接设置宽度和高度值不需要html单位,默认为PX像素;
3、img标签内设置高度宽度优点直观,对于文章内插入图片可以利用此方法控制设置图片高度宽度;缺点,如果图片列表排版的这样会增加很多HTML代码,不便统一修改。
二、CSS样式控制width、height
语法:img{width:150px;height:60px}
这里设置CSS宽度为150px,css高度为60px,注意是CSS样式中css width和css height的值都带单位也要记住一定带上单位,这里和HTML img标签内设置高度宽度不带单位一定区别大家一定注意并记住此知识点。
如果是我们直接对img设置样式,这样会将整个网页中图片宽度高度控制了。为了控制指定对象内的图片宽度高度样式,我们通常在img前加上对象CSS命名。
假如我们要控制.divcss5内图片样式,那我们语法如下:
.divcss5img{width:150px;height:60px}
解释语法结构:对象选择器命名加一个空格然后输入img接着“{...}”构成控制指定对象内图片样式。
三、CSS设置IMG图片宽度和高度实例
1、CSS设置图片实例描述
我们在一个HTML中放图片,1张为原始大小图片,1张为通过CSS设置宽度和高度图片,通过2张图片对比分析通过CSS改变图片大小。
2、实例完整HTML+CSS代码如下:
<!DOCTYPEhtml>
<html>
<head><metacharset="utf-8"/>
<title>css控制图片大小在线示www.divcss5.com</title>
<style>.divcss5img{width:300px;height:100px}</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<p><imgsrc="divcss5-logo-201305.gif"><br>本身这个图片宽度为165px高度60px</p>
<p><strong>通过CSS改变设置图片大小</strong></p>
<divclass="divcss5"><imgsrc="divcss5-logo-201305.gif"><br>这里设置divcss5盒子里图片宽度300px高度100px</div>
</body>
</html>
两处使用图片为同一张图片,以便观察效果。
3、图片大小设置实例截图
从上图我们能看出CSS改变IMG图片大小,从而让图片比原始的大。
(4)css背景图片大小改不了扩展阅读:
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
E. css中如何调整插入背景图片的大小
body{background:"#FF0000 url( http://www.zhoz.com/zhoz_com_2008bg.png) no-repeat fixed center top";}HTML DOM background 属性:是用于在一个声明中设置所有背景属性的一个简写属性。语法:Object.style.background=background-color background-imagebackground-repeat background-attachment background-position参数 描述 值 background-color 设置元素的背景色。 color-name color-rgb color-hex transparent background-image 设置背景图像。 url(URL) none background-repeat 设置背景图像是否及如何重复。 repeat repeat-x repeat-y no-repeat background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 scroll fixed background-position 设置背景图像的起始位置。 top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
F. 关于html中背景图片的问题。。。用<body background=...>或者用css中 body{}加入的图片怎么调节大小
背景图片实现不了缩放,是多大就是多大,只可以设置背景图片的位置,和重复等属性,没有缩放属性,背景图片大于容器,容器只会截取某部分,小了则根据你的定义重复显示,或者不重复,补背景颜色等
G. css中如何调整插入背景图片的大小
可以通过cover和contain来对图片进行伸缩。
语法:
background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */
background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
(7)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%;
}
H. 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; //把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
(8)css背景图片大小改不了扩展阅读
background-size属性浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
参考资料
网络——background(计算机专业术语)
I. CSS样式表控制背景图片大小
可以通过background-size属性来设定背景图片的大小。它可以是像素(px)或者是百分比(%),举例说明:background-size:950px* 200px这表示把背景图片大小调整为宽度950像素,高度200像素。
1、background-size的语法说明:
(1)属性名:background-size
(2)属性值:其中 bg-size = [|| auto ]{1,2} | cover |
contain
(3)初始值:auto auto
(4)应用于:所有元素
(5)继承性:无
(6)百分比:后面会说明
(7)计算值:根据指定
2、代码说明:
/* 一个值: 这个值指定图片宽度,第二个值为auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
/* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景,用逗号隔开,在CSS语法中凡语法后跟*或者#,都是可以无限重复的,但必须用逗号隔开。 */
background-size: auto, auto /* 请区别于background-size: auto auto*/
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
(9)css背景图片大小改不了扩展阅读:
背景重复:
如果需要在页面上对背景图像进行平铺,可以使用background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
背景图像将从一个元素的左上角开始。如下:
body
{
background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y;
}
背景定位:
可以利用background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat; background-position:center;
}
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。