找回密码
 立即注册
搜索
查看: 1622|回复: 0

CSS3 背景 background-origin

[复制链接]

581

主题

110

回帖

4066

积分

管理员

积分
4066

众神之神

发表于 2015-11-20 08:58:44 | 显示全部楼层 |阅读模式
background-origin 规定背景图片的定位区域。
描述
padding-box背景图像相对于内边距框来定位。
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>background</title>
  6.         <style>
  7.                 div {
  8.                         background-color: #000000;
  9.                         border: dashed 15px #008000;
  10.                         padding: 30px;
  11.                         color: white;
  12.                         font-size: 30px;
  13.                         font-weight: bold;
  14.                         background-image: url("./images/qingwa.png");
  15.                         background-repeat: no-repeat;
  16.                 }
  17.                 .div1 {
  18.                         background-origin: border-box;
  19.                 }
  20.                 .div2 {
  21.                         margin-top: 40px;
  22.                         background-origin: padding-box;
  23.                 }
  24.                 .div3 {
  25.                         margin-top: 40px;
  26.                         background-origin: content-box;
  27.                 }
  28.         </style>
  29. </head>
  30. <body>
  31.         <div class="div1">实例1</div>
  32.         <div class="div2">实例2</div>
  33.         <div class="div3">实例3</div>
  34. </body>
  35. </html>
复制代码

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|十三博客 ( 鲁ICP备2023000528号 )

GMT+8, 2026-6-1 17:28 , Processed in 0.049799 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表