zoukankan      html  css  js  c++  java
  • background-origin背景图片定位

    语法

    background-origin: padding-box|border-box|content-box;

    background-Origin属性指定background-position属性应该是相对位置。

    注意如果背景图像background-attachment是"固定",这个属性没有任何效果。

    padding-box 背景图像填充框的相对位置
    border-box 背景图像边界框的相对位置
    content-box 背景图像的相对位置的内容框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图像定位</title>
        <style>
        div{
            border:40px solid rgba(0,233,0,0.4);
            padding: 40px;
            background-image: url("ym.jpg");
            background-repeat: no-repeat;
            /*background-position:left;*/
            background-size:100% 100%;
        }
        .box1{
            background-origin:border-box;
            width:200px;
            height:300px;    
        }
        .box2{
            background-origin:content-box;
            width: 200px;
            height: 300px;
        }
        .box3{
            background-origin:padding-box;
            width:200px;
            height:300px;
        }
        p{
            color:gold;
            font-size:20px;
    
        }
    
        </style>
    </head>
    <body>
        <div class="box1">
            <p>background-origin: border-box;背景图像相对于border来定位。
            </p>
        </div>
        <br><br>
        <div class="box2">
            <p>background-origin: content-box;背景图像相对于content来定位。
            </p>
        </div>
        <br><br>
        <div class="box3">
            <p>background-origin: padding-box;背景图像相对于padding来定位。
            </p>
        </div>
    </body>

    border的定位:

    根据content来定位:

     

    根据padding定位:

     

  • 相关阅读:
    tomcat feign rocketmq 最大线程数
    rocketmq
    使用docker在linux上安装oracle数据库
    dnf 腾讯 解人脸
    记一次mysql慢查询优化
    python运行内存分析
    【转】【WPF】WPF强制刷新界面
    【转】【WPF】Grid显示边框线
    流媒体服务新手入门教程03--音视频基础
    流媒体服务新手入门教程02--m7s环境搭建
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11705101.html
Copyright © 2011-2022 走看看