zoukankan      html  css  js  c++  java
  • CSS background 属性

    在一个声明中设置所有背景属性:

    background: #00FF00 url(bgimage.gif) no-repeat fixed top;

    属性:

    background-color规定要使用的背景颜色。例:background-color:red;

    background-position规定背景图像的位置。例:background-position:center;

    描述
    • 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规定背景图片的尺寸。例:background-size:80px 60px;

    描述
    length

    设置背景图像的高度和宽度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    percentage

    以父元素的百分比来设置背景图像的宽度和高度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    cover

    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    背景图像的某些部分也许无法显示在背景定位区域中。

    contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

    background-repeat规定如何重复背景图像。例:background-repeat:repeat-y;

    默认地,背景图像在水平和垂直方向上重复。

    描述
    repeat 默认。背景图像将在垂直方向和水平方向重复。
    repeat-x 背景图像将在水平方向重复。
    repeat-y 背景图像将在垂直方向重复。
    no-repeat 背景图像将仅显示一次。
    inherit 规定应该从父元素继承 background-repeat 属性的设置。

    background-origin规定背景图片的定位区域。例:background-origin:content-box;

    描述
    padding-box 背景图像相对于内边距框来定位。
    border-box 背景图像相对于边框盒来定位。
    content-box 背景图像相对于内容框来定位。

    background-clip规定背景的绘制区域。例:background-clip:content-box;

    描述
    padding-box 背景被裁减到内边距框
    border-box 背景被裁减到边框盒
    content-box

    背景被裁减到内容框

    background-attachment规定背景图像是否固定或随页面的其他部分滚动。例:background-attachment:fixed;

    描述
    scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
    fixed 当页面的其余部分滚动时,背景图像不会移动。
    inherit 规定应该从父元素继承 background-attachment 属性的设置。

    background-image规定要使用的背景图像。例:background-image:url(bgimage.gif);

    请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

    建议使用这个简写属性,如:background:#ff0000 url('smiley.gif');而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

    为什么背景图在手机上显示不出来?

  • 相关阅读:
    tile38 复制配置
    The Guardian’s Migration from MongoDB to PostgreSQL on Amazon RDS
    tile38 一款开源的geo 数据库
    sqler sql 转rest api 的docker 镜像构建(续)使用源码编译
    sqler sql 转rest api javascript 试用
    sqler sql 转rest api redis 接口使用
    sqler sql 转rest api 的docker image
    sqler sql 转rest api 的工具试用
    apache geode 试用
    benthos v1 的一些新功能
  • 原文地址:https://www.cnblogs.com/Willa-Wei/p/13396195.html
Copyright © 2011-2022 走看看