zoukankan      html  css  js  c++  java
  • background-origin设置背景图像的参考原点(位置)

    • padding-box:从 padding区域(含 padding)开始显示背景图像;
    • border-box:从 border区域(含 border)开始显示背景图像;
    • content-box:从 content区域开始显示背景图像

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title></title>
     6 <style>
     7 *{
     8 margin: 0;
     9 padding: 0;
    10 }
    11 .pic{
    12 width: 406px;
    13 height:300px;
    14 background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603881365383&di=0a70eec494aaa4d38106556d913f7b4c&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-09-25%2F5ba9957dc955a.jpg) no-repeat;
    15 border: 10px dashed skyblue;
    16 padding: 30px;
    17 background-size: cover;
    18 background-origin: content-box;
    19 }
    20 </style>
    21 </head>
    22 <body>
    23 <div class="pic"></div>
    24 </body>
    25 </html>
  • 相关阅读:
    JS笔记009
    JS笔记008
    JS笔记007
    JS笔记006
    JS笔记005
    JS笔记004
    JS笔记003
    JS笔记001
    CSS3笔记012
    expdp SYNONYM of publick and schema owner
  • 原文地址:https://www.cnblogs.com/webaction/p/13903326.html
Copyright © 2011-2022 走看看