background-image大小(backgroundimage怎么设置图片大小)

http://www.itjxue.com  2023-01-29 00:08  来源:未知  点击次数: 

background-image 图片的大小怎么设置

图片不能完整显示,要设置a标签的大小,a{display:block; width:**px; height: **px; }, 也可以通过背景图片定位来达到你要的效果, background-position 具体问题具体对待。。。

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

扩展资料:

背景重复:

如果需要在页面上对背景图像进行平铺,可以使用?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,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

参考资料来源:w3school:CSS 背景

css如何使background-image自动适应窗口大小?

你好,如果只考虑高级浏览器,这个需求很好做,一句简单的css代码就可以搞定了:

html,

body?{width:?100%;height:?100%;}

body?{background-image:?url(images/bg.png);background-size:?cover;}

其中background-size的取值:

cover:保证背景不变形填满窗口,超出部分被裁剪

contain:保证整张背景图片在body内部,不足区域留白

二者都能保证背景随窗口大小变化而自适应。

另,如果是要考虑到低级浏览器,这个稍微麻烦点,不过可以给你提供解决方案

设置一个背景img标签,fixed定位,填满整个窗口

window.onresize的时候,动态计算img标签的尺寸,同时改变定位位置

希望能解决你的问题,如有疑问欢迎追问,望采纳~

(责任编辑:IT教学网)

更多

推荐图片影音文章