规定背景图像的尺寸:
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
background-color
background-image 规定要使用的背景图像
background-repeat 规定如何重复背景图像
background-origin 规定背景图片的定位区域
background-position 规定背景图像的位置
如果图片不居中可设置: background-position: center;
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
background-size 规定背景图片的尺寸,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
- background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */
- background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */
- background-size:10%;/*
0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候将其作为图片宽度来等比缩放 */ - background-size:cover;/* 将背景图片等比缩放填满整个容器 */
- background-size:contain;/* 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。*/
background-clip 规定背景的绘制区域
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动
inherit 规定应该从父元素继承 background 属性的设置
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。
Q、本地图能正常加载,测试过程中图片加载不出?
A、解决方案:
1.在class里面添加背景图片:background:url(“…/icon/icon.png”) no-repeat 5px 5px;
2.将图片import进来,如import image from…
3.用require加载
图片上下左右居中且自适应
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.content{
width: 300px;
height: 300px;
border: 1px solid red;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
img{
max-width: 100%;
max-height: 100%;
}
</style>
<body>
<div class="content">
<img src="./img.png">
</div>
</body>
</html>
img明明是行内元素 为什么可以设置宽高?
原因:img确实是行内元素 但它也是置换元素( 包括img input select textarea button label 等)
他们区别一般inline元素是:这些元素拥有内在尺寸(内置宽高 :可以设置width/height属性),他们的性质同设置了display:inline-block
直接background也可以实现上面的效果
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.content{
width: 300px;
height: 300px;
border: 1px solid red;
box-sizing: border-box;
background: url("./img.png") center center no-repeat;
background-size: contain;
}
</style>
<body>
<div class="content">
</div>
</body>