在css中,可以使用background-size属性来改变背景图片大小,该属性的作用就是指定背景图片大小,可通过将属性值设置为长度值或百分比来改变图片大小,或者通过将属性值设置为cover和contain关键字来对图片进行伸缩处理。
在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现。
background-size属性可以指定背景图片大小。语法格式:
background-size: length|percentage|cover|contain;
- length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)
- percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为”auto(自动)”
- cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
- contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
background-size属性可通过长度值或百分比来设置图片大小,或者通过cover和contain来对图片进行伸缩设置。
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ width: 400px; height: 230px; } .box1{ background:url(img/3.jpg) no-repeat; } .box2{ background:url(img/3.jpg) no-repeat; background-size: 200px 112px; } </style> </head> <body> <p><strong>原始背景图片大小</strong></p> <div class="box1"></div> <p>本身这个图片宽度为400px,高度225px</p> <br /> <p><strong>通过CSS修改背景图片大小,图片宽度为200px,高度112px</strong></p> <div class="box2"></div> </body> </html>
效果图:
未经允许不得转载:任鹏个人博客 » css如何改变背景图片大小
最新评论
Forex wiki. https://lt.forex-stock-bitcoin-brokers.com
Magnificent items from you, man. I have take note your stuff
Following on from the 3rd March Meetings held by economic de
It is remarkable, rather valuable message dfgdlfg2131.32
一般都会有一个沙盒期的,过了沙盒期就会慢慢放出来
百度不收录是应为是新站的原因吗?
The spike in consumer prices that left inflation at a four-d