zoukankan      html  css  js  c++  java
  • CSS:background-

    background-position:设置背景图像的位置

    这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。

    要将background-attachment属性设置为"fixed",才能保证background-position属性FF和Opera中正常工作。

    top left ,top center, top right; center left, center center, center right; bottom left, bottom center, bottom right

    如果仅规定第一个关键词,第二个将是center.默认值0% 0%

    x% y%

    第一个值是水平位置,第二个值是垂直位置。

    左上角是0% 0%, 右下角是100% 100%

    如果仅规定一个值,另一个将是50%

    xpos ypos

    第一个值是水平位置,第二个值是垂直位置。

    左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

    如果您仅规定了一个值,另一个值将是50%。

    您可以混合使用 % 和 position 值。

    详情

    background-size:规定背景图像的尺寸(CSS3)

    默认值:auto

    length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值被设置为auto.

    percentage:以父元素的百分比来设置图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为“auto”。

    cover:把背景图像扩展至足够大,使其完全覆盖背景区域,背景图像的某些区域也许无法显示在背景区域中。宽高比固定

    contain:把图像扩展至最大尺寸,以使其宽度和高度适应背景区域。宽高比固定

     

    background-repeat:设置是否、如何重复背景图像

    repeat:默认。背景图像将在垂直方向和水平方向重复。

    repeat-x:背景图像将在水平方向重复。

    repeat-y:背景图像将在垂直方向重复。

    no-repeat:背景图像将仅显示一次。

    background-origin:规定background-position属性相对于什么位置来定位。(CSS3)

    注:如果背景图像的的background-attachment属性为“fixed”,则该属性没有效果。

    padding-box:默认值。背景图像相对于内边距框来定位

    border-box:背景图像相对于边框盒来定位

    content-box:背景图像相对于内容框来定位

    width、height不包括border-box.div总宽度应该是width+borderwidth*2

    background-clip:规定如何裁剪背景(CSS3)

    border-box:默认值。背景被裁剪到边框盒

    padding-box:背景被裁剪到内边距框

    content-box:背景被裁剪到内容框

    background-attanchment:规定背景是否和页面其余部分一起滚动

    scroll:默认值。背景图像会随着页面其余部分的滚动而移动。

    fixed:当页面的其余部分滚动时,背景图像不会移动。

    background-image:为元素设置背景图像

    url('URL'):图像路径

    none:默认值。不显示背景图像

    寻找爱
  • 相关阅读:
    ASP.NET 表单验证 Part.1(理解表单验证)
    Silverlight 简介 Part.3(设计 Siverlight 页面)
    ASP.NET 成员资格 Part.3(LoginStatus、LoginView、PasswordRecovery)
    ASP.NET 网站部署 Part.1(安装IIS、复制文件部署网站)
    ASP.NET Dynamic Data Part.1(创建动态数据应用程序)
    ASP.NET 安全模型 Part.2(SSL)
    ASP.NET MVC Part.2(扩展基本的 MVC 应用程序)
    ASP.NET 网站部署 Part.2(使用 Web 部署)
    开发高级 Web 部件
    创建 Web 部件(WebPart 类、简单的 Web 部件)
  • 原文地址:https://www.cnblogs.com/carolina/p/5487540.html
Copyright © 2011-2022 走看看