檬味博客 » 问答 » css中的背景图怎么改变大小

css中的背景图怎么改变大小

电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入css代码：body{background: url(image.jpg) no-repeat;background-size: 200px 200px; }。3、浏览器运行index.html页面，此时背景图片成功被设定为200*200。
css中的背景图怎么改变大小
这得用到CSS3的知识。
background-size:200px 200px;
-moz-background-size:200px 200px;
-moz-background-size:200px 200px;

-o-background-size:200px 200px;

或者你可以用photoshop把图片变小一点。

也可以把背景图片转化为<img src="#" />，这样的话就可以<img src="#" width="200" height="200" />2012-07-31
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：body{background: url(image.jpg) no-repeat;background-size: 200px 200px; }。

3、浏览器运行index.html页面，此时背景图片成功被设定为200*200。

2019-07-11
主要有以下几种方法：
1-把图片放在div的背景图里，再利用css3的background-size属性，语法：
background-size: length|percentage|cover|contain;这个CSS3的属性作用是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中，如果不使用这个属性，在IE11和FireFox中缩放浏览器，背景图片会随之缩小，同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器；background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，当设置为fixed时页面的其余部分滚动时，背景图像不会移动。

2-如果是有规律变化的图，可以将图片单独切出来，然后repeat-x或者repeat-y进行平铺，也是一个不错的方法，而且图片可以切得不用那么大，也对图片进行充分利用。

3-将图片写在img标签里，然后对图片和div进行相对定位/绝对定位，效果是图片尺寸不会随浏览器缩放而变化，但是如果有竖直滚动条时，图片不会固定而会随滚动条移动。只需要把图片的宽度width设置成100%就行了。
2015-07-02
CSS2.1 之前是不能设置背景图大小的，CSS3就可以通过background-size来设定图片大小，可以是像素或者是百分比，如background-size:100px 200px;表示把背景图片大小调整为100x200px，目前IE只有IE9支持这个属性，其它主流浏览器也都支持2015-05-20
　　css中的背景图控制大小的方法：
我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽
还可以用CSS样式控制width、height，如：img{width:150px;height:60px}
CSS设置IMG图片宽度和高度，如：.divcss5 img{ width:300px; height:100px}
【注意】控制背景图片的方法有很多，只要活学活用即可完美解决问题。
2015-09-20
mengvlog 阅读 8 次 更新于 2025-07-21 00:04:59 我来答关注问题0
5 个回答檬味博客专题活动
  • 校企律说法 css中如何调整插入背景图片的大小

    在CSS中，我们可以通过`background-size`属性来调整背景图片的大小。这个属性允许你指定背景图片的宽度和高度，可以是具体的像素值，也可以是相对大小。2. 设置具体像素值 如果你想将背景图片调整到特定的尺寸，可以直接给`background-size`属性设置宽度和高度。例如，`background-size: 500px 300px;`会...

  • 文暄生活科普 css中如何调整插入背景图片的大

    在CSS中，调整插入背景图片的大小和布局可以通过一系列的`background-size`属性值来实现。这个属性允许你精细地控制图片的缩放和适应性。主要有以下几种方式：1. 默认值：`background-size: auto;`，保持图片原始尺寸，不改变图片的宽高比。2. 定值缩放：`background-size: 100px 50px;`，指定图片的...

  • 腾云新分享 css背景图片大小如何设置

    CSS背景图片大小可以通过backgroundsize属性进行设置。具体设置方法如下：指定宽度和高度：使用backgroundsize: width height;来设置背景图片的宽度和高度。例如，backgroundsize: 400px auto;会将背景图片的宽度设置为400像素，高度则自动按比例调整。使用百分比：可以使用百分比来设置背景图片的大小，相对于背景...

  • 武汉誉祥科技 如何让css背景图片占满全部背景,并且保持长宽比呢

    使用contain会使背景图片完全适应容器，同时保持其长宽比。如果希望背景图片尽可能地填充容器，但不会拉伸变形，可以使用cover：background-size: cover;cover会确保背景图片完全覆盖整个容器，但可能会导致图片变形。通过这些方法，我们可以灵活地控制背景图片的尺寸，同时保持其原始比例，使页面更加美观。

  • 宸辰游艺策划 css中如何设拉伸背景图片铺满屏幕

    1. 背景图片设置： 在CSS中，可以使用`background-image`属性来设置网页的背景图片。你需要将此属性指向你的图片文件。2. 背景尺寸调整： 为了使背景图片拉伸并铺满整个屏幕，你需要设置`background-size`属性。该属性的值可以设置为`cover`，这意味着背景图片将等比拉伸以覆盖整个元素区域，可能会留下...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部