css里面设置一个背景边框图片或者填充一张图片,使图片填充整个div容器;

一、就一个div,设置其背景图片

1.背景图片

css里面设置一个背景边框图片或者填充一张图片,使图片填充整个div容器;_第1张图片

2.代码

#left-bottom {
  /*height: 31%;*/
  height: 38%;
  margin-top: 25px;
  position: relative;
  border: 1px solid red;
 /* 设置背景尺寸 */
  background-size:100% 100%;
  background-image:url("../static/images/panel.png") ;
  background-repeat:no-repeat;
  box-sizing: border-box;
}

3.图片展示

图中的红色边框是div的大小,正好填充完全

css里面设置一个背景边框图片或者填充一张图片,使图片填充整个div容器;_第2张图片

二、在div里面填充一张图片

1.要填充的图片

css里面设置一个背景边框图片或者填充一张图片,使图片填充整个div容器;_第3张图片

2.html代码 

3.css代码 

.left-bottom1 {
    border: 1px red solid;
    position: relative;
    width: 30px;
    height: 30px;
    top: 20%;
    left: 35%;
}

//设置容器里面图片的大小
.left-bottom1 img {
    width: 100%;
    height: 100%;
}

4.图片展示

图中的红色边框是div的大小,正好填充完全

css里面设置一个背景边框图片或者填充一张图片,使图片填充整个div容器;_第4张图片

 

你可能感兴趣的:(JavaScript,css,css3,前端,html,javascript)