如何让小图片不变性的平铺

标题背景图片如何在内容撑大后不变形

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>滑动门</title>
 <style>
 *{
  padding: 0px;
  margin: 0px;
 }
//当div宽度大于背景图片的时候，它就不能完全展示他的背景
 div{
  width: 100px;
  height: 60px;
  background: red url("images/nav-all.jpg") repeat;
  margin: 200px auto;
 }
 </style>
</head>
<body>
 <div></div>
</body>
</html>

在这里插入图片描述
-----如何解决
1、背景图片平铺但背景是复制的没有效果

2、设置背景图片大小
background-size:200px 60px;图片变形
—真正解决问题

滑动门:超出范围就出现问题

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>滑动门</title>
 <style>
 *{
  padding: 0px;
  margin: 0px;
 }
 /*div{
  width: 100px;
  height: 60px;
  background: red url("images/nav-all.jpg") no-repeat;
  margin: 200px auto;
  background-size: 200px 60px;
 }*/
 .man{
  width: 100px;
  height: 60px;
  background: red url("images/nav-left2.jpg") no-repeat;
  margin: 200px auto;
 }
 .right{
  width: 20px;
  height: 60px;
  background: url("images/nav-right.jpg") no-repeat;
  float: right;
 }
 </style>
</head>
<body>
 <div class="man">
  <div class="right"></div>
 </div>
</body>
</html>

在这里插入图片描述

另外一个滑动门

 .all{
  width: 100px;
  height: 60px;
  background:red url("images/nav-center.jpg") repeat-x;
  margin: 200px auto;
 }
 /*左边圆弧*/
 .left{
  /*width: 20px;*/
  width: 100%;
  height: 60px;
  background: url("images/nav-left2.jpg") no-repeat;
 }
 .right{
  width: 100px;
  height: 60px;
  background: url("images/nav-right.jpg") no-repeat center right;
 }
 </style>
</head>
<body>
 <!-- <div class="man">
  <div class="right"></div>
 </div> -->
 <div class="all">
  <div class="left">
   <div class="right"></div>
  </div>   
 </div>
</body>
</html>

-----三张背景图片左右让他始终在左右中间平铺就不会变形

背景图片切割实现

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>滑动门</title>
 <style>
 *{
  padding: 0px;
  margin: 0px;
 }
 div{
  width: 100px;
  height: 60px;
  border: 20px solid #000;
  box-sizing: border-box;
  border-image: url("images/nav-all.jpg") 20 fill repeat;
  margin: 200px auto;
  }
 </style>
</head>
<body>
 <div></div>
</body>
</html>

如何让小图片不变性的平铺

标题背景图片如何在内容撑大后不变形

猜你喜欢