zoukankan      html  css  js  c++  java
  • background--详解(背景图片根据屏幕的自适应)

    background:有以下几种属性:

    background-color
    background-position
    background-size
    background-repeat
    background-origin
    background-clip
    background-attachment
    background-image

    eg:

      

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

    一块区域的背景是红色,图片是***,不平铺,背景图像不随着页面的其余部分滚动,图片的位置在中间。

    background-color:简单。。。
    background-position:
    background-position:属性设置背景图像的起始位置。
      1.有left,top,right,bottom,center五个值组合显示位置。如果只写第一个,第二个省略默认center。
      2.x% y%:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。
      3.Xpx Ypx: 第一个值是水平位置,第二个值是垂直位置。
    background-size:
    background-size:规定背景图像的尺寸
      1.length:设置背景图像的高度和宽度第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
      2.percentage:以父元素的百分比来设置背景图像的宽度和高度第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
      3.cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
      4.contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
    background-repeat:
    background-repeat:规定如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。
      1.repeat-x,repeat-y 背景图像将在水平方(垂直)向重复。
      2.no-repeat:不重复。
      3.inherit:规定应该从父元素继承 background-repeat 属性的设置。
    background-origin:
    background-origin: 规定背景图片的定位区域。
      1.padding-box:背景图像相对于内边距框来定位。
      2.border-box:背景图像相对于边框盒来定位。
      3.content-box:背景图像相对于内容框来定位。
    background-clip:
    background-clip:规定背景的绘制区域。背景被裁剪到什么位置,和origin属性相似
      1.padding-box:背景图像被裁剪到内边距内部。
      2.border-box: 背景图像被裁剪到边框内部。
      3.content-box:背景图像被裁剪到内容框内部。
    background-attachment:
    background-attachment:规定背景图像是否固定或者随着页面的其余部分滚动。
      1.scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
      2.fixed:当页面的其余部分滚动时,背景图像不会移动。
      3.inherit:规定应该从父元素继承 background-attachment 属性的设置。
    background-image
    background-image:路径,简单。
    eg:
    .boxImg{width: 100%;height: auto;}
    .img{display: block;background:url(***) no-repeat 100% auto center scroll;}

    图片随着屏幕的大小自适应,图片不会失帧,会格局宽度自己缩放高度,达到图片的清晰。

  • 相关阅读:
    HDU 1358 Period (KMP)
    POJ 1042 Gone Fishing
    Csharp,Javascript 获取显示器的大小的几种方式
    css text 自动换行的实现方法 Internet Explorer,Firefox,Opera,Safar
    Dynamic Fonts动态设置字体大小存入Cookie
    CSS Image Rollovers翻转效果Image Sprites图片精灵
    CSS three column layout
    css 自定义字体 Internet Explorer,Firefox,Opera,Safari
    颜色选择器 Color Picker,Internet Explorer,Firefox,Opera,Safar
    CSS TextShadow in Safari, Opera, Firefox and more
  • 原文地址:https://www.cnblogs.com/intelwisd/p/7852118.html
Copyright © 2011-2022 走看看