Ⅰ css问题:如何控制背景图片的大小
对于图片,首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样,那么就从CSS控制背景图片讲起吧。
1.CSS控制背景图片:
对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背景色就可以了,原因吗,我想也很简单,因为它与前景音乐一样,对于网页的打开,速度会有一定的影响。不过对于一般的个人网站,或者个人博客而言,它对展现自己的个性,当然是不可或缺的了,当然什么都不会太过完美,有好就有坏,也就是当图像不可用但CSS可用的时候,替换内容就不会显示出来,因此,并不建议在导航按钮文本或类似的情况中使用CSS背景图片。
控制背景图片的CSS属性有很多,只要与图片的相关的,大多都会用的上。
(1)、背景图片的导入:
当然大家最熟悉的当然是background与background-image了。
为网页设计背景图片的代码是:
body {background:url("d:\images\04.jpg")}
或者
body {background-image:url("d:\images\04.jpg")}
这样的话,我们就能将想要作背景的图片导进网页里了。
(2)、背景图片的显示方式:
当然,只用上面的代码,是无法表达出自己想要的效果的。因为,图片小了,就会以平铺的方式,如果是大了,为显示它,就是会出现滚动条,这样多不好。因此,我们还得多其进行显示控制,也就是要用到background-repeat,
它是取值:
repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺
而代码,我想只要懂一点CSS的都知道,如下:
body {background:url("d:\images\04.jpg");background-repeat:no-repeat}
这样的话,它就是以原图像大小显示了。
(3)、背景图片的大小控制:
不过问题是,倘若图片过大了,又怎么办呢?对于一个好网页来说,最好不要用太大的图片,原因上面也说过了,影响打开网页的速度。我们最好还是用PS或者FireWorks处理一下。不过既然我提到了,我们也不防用CSS来实现图片大小的控制。
我想很多人会自然而然的用上如下代码:
呵呵,想法是好的,但你所用的浏览器支持吗?我想IE或者FF一定会当作没看见吧。也许你会问,我曾经设计论坛风格时,是可以实现的啊?我想,如果只是上面的代码的话,那是不可控制图片的,因为它只是控制BODY的大小。当然,这里也是控制不了的。如果是其它的ID标记,我想是可以控制记标记的范围大小,呵呵,当然也就不是图像的大小了。
说实话,这个问题不仅困扰着你们,同时也困扰着我。因为它只是一个属性的值,而不是一个真正的对像。呵想到了用CSS控制的话,记得告诉我哦。
补充:W3C于9月10发布了一篇名为《CSS Backgrounds and Borders Mole Level 3》的应文章,里面为CSS的背景加上了几个我们从未见的属性:
background-clip :
background-origin :
background-size :背景尺寸。
background-break :
虽然是有了这些属性,不过现在还没有支持它们的浏览器。真是好苦恼啊。
(4)、背景图片的位置控制:
背景图片,我科是导进来了,但是它的位置真有一点无法让人接受。因为它默认的是左上对齐。但是我们却不想这样子放置,那我们又该怎么办呢。不要着急,激动人心的时刻马上到来,现在,让我们来认识一下background-position、background-position-x及background-position-y吧。
a.基本语法:
background-position : length || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top | center | bottom
b.语法取值:
length :百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
c.示例:
body { background-image: url("d:\images\04.jpg"); background-position: 50% 50%; background-repeat:no-repeat; } /*设置双向坐标,这时相当于完全居中*/
body { background-image: url("d:\images\04.jpg"); background-position-x: 50%; background-repeat:no-repeat; } /*设置双向坐标,这时相当于水平居中*/
body { background-image: url("d:\images\04.jpg"); background-position-y: 50%; background-repeat:no-repeat; } /*设置纵向坐标,这时相当于垂直居中*/
对于取值为length | top | center | bottom我只写下面三个例子。
body { background-image: url("d:\images\04.jpg"); background-position: top right; background-repeat:no-repeat; } /*设置双向坐标,这时相当于右上*/
body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat; } /*设置双向坐标,这时相当于中下*/
body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; } /*设置双向坐标,这时相当于距左60像素下*/
说了这么多例子,我想你对于定位,有一定的了解了吧。
(5)、背景图片的透明设置:
有的时候,我们总想着去将图片设置成透明的。
(6)、多幅背景图片的设置:
对于多幅背景图片的设置,我是在《超越CSS:WEB设计艺术精髓》里看到的。不过,却又让我很遗憾,因为,目前支持一个标签内有多幅背景图片的浏览器太小了,我知道的也只有Apple Safari 。以许你会问,这怎么可能。当你看完这个实例之后,我想你会惊讶,“天啊,CSS3之前都只能给每个元素使用一幅图片。”如果想研究一下的话,就快快安装一个SAFARI浏览器吧。对我而言,我相信,这是发展的趋势。总之一句话,谁解释CSS能力越强,它就将是发展的潮流,谁俱有完美的WEB准标,谁就是明日浏览器之星。
代码如下:
body {
background-image:
url("d:\mypic\001.png"),
url("d:\mypic\002.png");
url("d:\mypic\003.png");
url("d:\mypic\004.png");
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x,
repeat-y,
repeat-x,
repeat-y,
background-position:
top left,
top right,
bottom right,
bottom left,
top left,
top right,
bottom right,
bottom left;}
Ⅱ css如何定义背景图片的大小
CSS可以控制图片的大小,也可以控制背景图片的位置,但是不可以控制背景图片的大小,假如你背景图片是100*100的大小,你只要10*10的背景图,那么你就单独做一个10*10的背景图不就好了。
Ⅲ CSS中背景图片的大小
对的,当以<img src="" />形式出现的时候可以有几种种方法实现;
而当采用backgroud形式作为背景的时候,只能通过改变原图了,不过当背景是有规律的渐变色、纹路、图案等时候,可以把图片切小后通过平铺的方式铺满!
Ⅳ css中的背景图怎么改变大小
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
Ⅳ div+css 如何改变背景图片大小
<table width="100" height="100" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top" width="4" height="4"><img height="4"
src="img/xiao/new_line_004.gif" width="4" /></td>
<td background="img/xiao/new_line_008.gif" height="4"></td>
<td valign="top" width="4" height="4"><img height="4"
src="img/xiao/new_line_005.gif" width="4" /></td>
</tr>
<tr>
<td width="1" background="img/xiao/new_line_009.gif"></td>
<td
align="middle" valign="top"
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; PADDING-TOP: 0px"></td>
<td background="img/xiao/new_line_010.gif"></td>
</tr>
<tr>
<td valign="top" width="4" height="4"><img height="4"
src="img/xiao/new_line_006.gif" width="4" /></td>
<td background="img/xiao/new_line_011.gif"></td>
<td valign="top" width="4" height="4"><img height="4"
src="img/xiao/new_line_007.gif" width="4" /></td>
</tr>
</tbody>
</table>
--------------------------
把圆角矩形的图做成GIF的,然后切片,切成8个部分,代码里的图片就是那8个部分了
4个角上是4个图片,也就是切出来的4个圆角,但是要很小
Ⅵ css怎样编辑背景图片的大小
<div style="width:100%; height:100%; background:url(xxxx.jpg) no-repeat center / cover; color:#fff">背景图布满整个div框,文字颜色为白色</div>
Ⅶ css文件 如何使背景图片大小适应div的大小
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小。
background-size有3个属性:
auto:当使用该属性的时候,背景图片将保持100%
的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。
contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺。
Ⅷ 我在网页中插入了背景图片,怎样调整背景图片的大小
可以使用css的background-size属性来调整背景图片的大小,比如:
background-size: 240px 180px
背景图片的宽为240像素,高为180像素
background-size: 50% 30%
背景图片的宽设为容器宽度的50%,高设为容器高度的30%
background-size: cover
把背景图片扩展至足够大,以使背景图片完全覆盖容器区域(背景图片的某些部分也许无法显示在容器区域中)
background-size: contain
把背景图片扩展至最大尺寸,以使其宽度和高度完全适应容器区域(容器的部分边角位置可能会留空)
需要注意的是,background-size是css3的属性,浏览器必须支持css3才能看到预期的效果。好在现在的主流浏览器都是支持css3的(如果你坚持用IE6那当我没说)
Ⅸ htmL中怎么插入背景图片如何设置背景图片大小
可以使用html的background-image标签和background-size实现插入背景图片和控制图片大小。
具体步骤如下:
需要准备的材料分别是:电脑、浏览器、ultraedit。
1、在ue编辑器中新建一个空白的html文件。
Ⅹ css怎么可以根据内容大小调整背景图片的大小
背景图片是不能随便变换大小的, 可以考虑将图片设计成可平铺的