CSS3实例教程(5):网页页面情况照片

日期:2020-09-29 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站


情况照片/纹路有许多种应用方法,经常用于加上网站的最好的最后清理。如今它在CSS3中被高度重视,大家能够运用多情况图和情况照片规格来完成更完善的实际效果。
情况照片/纹路有许多种应用方法,经常用于加上网站的最好的最后清理。如今它在CSS3中被高度重视,大家能够运用多情况图和情况照片规格来完成更完善的实际效果。
上1篇文章内容:CSS3实例教程(4):网页页面边框和网页页面文本黑影
CSS3的情况照片尺寸能够写成 background-size:Apx Bpx;
-Apx = x轴(照片宽度)
-Bpx = y轴(照片高宽比)
掌握了这些,大家刚开始体验这个特点吧:
最好是适用CSS3情况尺寸的访问器是Safari和Opera,因此大家只必须应用-o和-webkit前缀。 情况尺寸

#backgroundSize{ border: 5px solid #bd9ec4; background:url(image_1.extention) bottom right no-repeat; -o-background-size: 150px 250px; -webkit-background-size: 150px 250px; padding: 15px 25px; height: inherit; width: 590px; }
访问器适用:
  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6 …)
  • Safari(3.2.1 windows…)
    以便在CSS3中运用多情况照片,大家应用都好分隔,比如:
    background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
    大家能够在1行编码中尝试置放好几个不一样的照片… 多情况图

    #backgroundMultiple{ border: 5px solid #9e9aab; background:url(image_1.extention) top left no-repeat, url(image_2.extention) bottom left no-repeat, url(image_3.extention) bottom right no-repeat; padding: 15px 25px; height: inherit; width: 590px; }
    访问器适用:
    • Firefox(3.05 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8 RC1 )
    • Opera(9.6 …)
    • Safari(3.2.1 windows…)