background-size设置背景图片的大小

最新推荐文章于 2024-04-12 10:32:25 发布
最新推荐文章于 2024-04-12 10:32:25 发布
阅读量1.9w 收藏 2
点赞数

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

提示：大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

任务

在右侧代码编辑器窗口的第12行，输入正确内容使背景图片填满整个容器。

<!DOCTYPE www.dztcsd.comhtml>
<html>
<head> 
<meta charset="utf-8">
<title>背景图片大小</title>
<style type="text/css">
.demo {
    background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    background-size:cover;
}
</style>  
</head> 
<body>
<div class="demo"></div>
</body>
</html>

大志天成119
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3之背景尺寸Background-size使用介绍
09-25
CSS3背景尺寸Background-size，这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小，下面为大家详细介绍下其语法、浏览器兼容及使用示例，感兴趣的朋友不要错过
background-size使用详解
12-13
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 语法： background-size: auto | <长度值> | <百分比> | cover | contain取值说明： 1、auto：默认值，不改变背景...
设置背景图片的宽度和高度
落日夕霞的博客
06-30 1万+
设置背景图片的宽度和高度
background-size 设置背景图片的大小
weixin_30432179的博客
01-06 580
background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如...
常用的background背景属性详细~~干货
weixin_74308843的博客
02-27 577
background-image: url(./imags/搜索.png);我们在平时写代码较用的一种背景排布。表示背景图片x轴与y轴占满该容器的背景，会用图片原来的尺寸放大所缩小到占满容器，cover可能会使背景图片。与cover相反，会将图片等比例完全展示出来，因此可能会使。repeat-y同理。1 、百分比方式： 当。图片向两端对齐以填满容器，，默认平铺填满r容器。常配合使用在精灵图。
html设置背景图片自适应
黑喵警长的博客
04-25 4万+
在网上找了很久，终于在一个百度问答里找到正确答案，记录下来，方便以后使用。 在<body>中设置： <body background="images\bg.jpg" style=" background-repeat:no-repeat ; background-size:100% 100%; background-attachment: fixed;" > 第一行是图片...
设置背景图片大小的方法
我的成长历程
08-07 1万+
等比例缩放填满盒子
java改变背景图片大小_java编写界面设置 背景图片的大小
weixin_36487018的博客
02-24 1200
设置背景图片大小跟电脑屏幕大小一致:方法:ImageIcon background = new ImageIcon("res\\index.jpg");Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();//得到电脑屏幕的大小Image temp = background.getImage().getScaledIn...
CSS背景background设置
pscool的博客
05-15 8229
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版 文章目录1. 背景back-ground-colorbackground-imagebackground-repeatbackground-positionbackground-clipbackground-originbackground-sizebackground-attachmentbackground简写属性练习 1：按钮点击效果练习 2：让背景固定不动 1. 背景 back-ground-color .
css3中背景尺寸background-size详解
09-25
background-size是css3提供的一个新特性，它可以让你随心所欲的控制背景图片的大小。下面我们来一步步看看这个新特性都有什么值得我们惊艳的地方
【css背景图片自适应】css怎么设置背景图片自适应大小
04-11
在css中，可以利用“background-size”属性设置背景图片自适应大小，该属性用于设置背景图片的大小，只需要给背景图片元素添加“background-size:cover;”样式，即可使背景图片的大小自适应。
CSS之背景的设置 (六)：background-(image、repeat、size、position、attachment)、background、background-image和img对比
Good Good Study,Day Day Up!
05-16 1383
用于设置元素的背景图片。
background详解
最新发布
时光清浅处，一步一安然
04-12 1004
background是 CSS 中的一个复合属性，用于设置元素的背景样式，包括颜色、图像、位置、大小、重复方式等。它可以简化为单独的背景属性，也可以一次性设置多个背景属性值。以下是background。
关于使用background属性给页面添加背景壁纸
MISSn270的博客
05-20 1049
1、body 方法 给body 添加图像 body 的方法可以实现更简单的添加。
background image属性详解
qq_41867900的博客
08-21 3950
background image属性详解
css如何设置背景图片？background属性添加背景图片
热门推荐
lin123_00的博客
05-18 5万+
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf4y117ji 「HTML+CSS」实现妙笔千山.
background-size 设置背景图片尺寸
脑瓜疼儿的博客
12-19 3157
background-size 有三个属性 auto :背景图片的真实大小 cover: 背景图片等比例缩放到铺满盒子 contain:背景图片拉伸以适应盒子大小 还可以直接设置大小 backgroun-size:100% 100%; 当写一个100%的时候只有宽适应 上下出现留白 当设置两个100%的时候等于cover 背景重复 round 如果背景图片在平铺的时候 有部分区域被截取 round...
关于background-image调整大小和位置的方法笔记
xiaoshen66的博客
07-19 3605
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #divtest{ width:400px;...
CSS中设置背景的7个属性及简写background注意点
王春燕的博客
04-13 5830
css中背景的设置至关重要，也是一个难点，因为属性众多，对应的属性值也比较多，这里详细的列举了背景相关的7个属性及对应的属性值，并附上演示代码，后期要用的话，可以随时查看，那我们坐稳开车了······ 1: background-color 设置背景颜色 2:background-image来设置背景图片 - 语法：background-image:url(相对路径); -可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下设置背景...
background-size指定背景图片大小
05-26
是的，background-size属性用于指定背景图像的大小。它可以接受不同的值，如具体像素数、百分比和关键字等。通过使用该属性，可以控制背景图片在元素中显示的大小。例如，可以使用"cover"值来让背景图像覆盖整个元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值