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

    background-size 大小 语法 background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain <length>: 由浮点数字和单位标识符组成的长度值。不可为负值。 <percentage>: 取值为0%到100%之间的值。不可为负值。

    background-origin 定位 语法 background-origin : border-box 从border区域开始显示背景。 padding-box 从padding区域开始显示背景。 content-box 从content区域开始显示背景。

    background-size 属性规定背景图片的尺寸。

    在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。

    您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

    例子 1

    调整背景图片的大小:

    div
    {
    background:url(bg_flower.gif);
    -moz-background-size:63px 100px; /* 老版本的 Firefox */
    background-size:63px 100px;
    background-repeat:no-repeat;
    }

    例子 2

    对背景图片进行拉伸,使其完成填充内容区域:

    div
    {
    background:url(bg_flower.gif);
    -moz-background-size:40% 100%; /* 老版本的 Firefox */
    background-size:40% 100%;
    background-repeat:no-repeat;
    }

    实例

    在 content-box 中定位背景图片:

    div
    {
    background:url(bg_flower.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-background-origin:content-box; /* Safari */
    background-origin:content-box;
    }
  • 相关阅读:
    redis持久化的方式RDB 和 AOF
    centos7搭建mysql-5.7.22主从复制
    Vue项目上线后刷新报错404问题(apache,nginx,tomcat)
    Zabbix监控华为交换机
    Zabbix数据库清理历史数据
    MySQL增删改查基本语句
    什么是SQL注入式攻击?
    .NET面试题(二)
    .NET面试题(一)
    .NET面试题(三)
  • 原文地址:https://www.cnblogs.com/JG37WY/p/7069215.html
Copyright © 2011-2022 走看看