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;}

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

  • 相关阅读:
    将wordpress中的文章导出为markdown
    配置腾讯云的出入站规则
    C/C++基础:main函数的参数argc和argv
    解决IDEA maven多模块打包问题
    信息安全系统设计基础第十一周学习总结
    201355315宋宸宁20135333苏正生信息安全系统设计基础——实验一实验报告
    读书笔记——《暗时间》
    信息安全系统设计基础第十周学习总结——实践
    家庭作业
    信息安全系统设计基础第九周学习总结
  • 原文地址:https://www.cnblogs.com/intelwisd/p/7852118.html
Copyright © 2011-2022 走看看