欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  代码如下:
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title></title>
 
  <styletype="text/css">
 
  .box{background:url("image/flowers.jpg")no-repeat;
 
  width:500px;
 
  height:500px;
 
  border:solid50pxrgba(0,0,0,0.5);
 
  padding:50px;
 
  float:left;
 
  margin-right:15px;
 
  box-sizing:border-box;
 
  }
 
  .boxspan{color:#000;display:block;font-size:30px;font-weight:bold;height:100%;text-transform:uppercase;background-color:rgba(256,256,256,0.5)}
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="box">
 
  <span></span>
 
  </div>
 
  </body>
 
  </html>
 
  Background-Origin让你可以决定你想要的背景位置起始点,border(边界)、padding(填充)和content(内容)。
 
  新属性background-origin根据box-model有3个值:
 
  1、border-box-定位背景位置0,0指向边框的左上角。
 
  2、padding-box(默认)-将背景位置定位在填充的左上角0,0点。
 
  3、content-box-定位背景位置0,0指向内容的左上角。

360截图20181107114124805.jpg

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56672.shtml