扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关Html5中背景属性的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
我们拥有十多年网页设计和网站建设经验,从网站策划到网站制作,我们的网页设计师为您提供的解决方案。为企业提供成都网站设计、成都网站建设、微信开发、微信小程序定制开发、成都手机网站制作、html5、等业务。无论您有什么样的网站设计或者设计方案要求,我们都将富于创造性的提供专业设计服务并满足您的需求。1、背景属性属性:
background-image
background-color
background-repeat
background-position
background-attachment
2、新增属性:
background-size:
background-size:x y; // 水平 垂直方向的尺寸,像素/百分比/auto/⋯
background-size:cover; //保持宽高比不变,保证占满盒子,但不保证能看到全部
background-size:contain; //保持宽高比不变,保证看清全图,但可能占不满盒子
多背景:
background-image:url(1.jpg),url(2.jpg);
background-origin 背景区域定位
border-box: 从border区域开始显示背景
padding-box: 从padding区域开始显示背景
content-box: 从content内容区域开始显示背景
background-clip 背景绘制区域
border-box: 从border区域开始绘制背景
padding-box: 从padding区域开始绘制背景
content-box: 从content内容区域开始显示背景
3、背景练习代码部分:
your title name
1、background-origin: border-box | padding-box | content-box
2、background-clip: border-box | padding-box | content-box
3、多背景:background: url('images/3.jpg') no-repeat center center/auto 200px, url('images/2.jpg') no-repeat center center/auto 300px, url('images/1.jpg') no-repeat center center/auto 400px;
注释:复合写background-size的时候,一定要用/与其他值隔开。
5、背景练习preview:
6、渐变:
线性渐变:linear-gradient(方位(left/left top/60deg),起始颜色 | 百分比30%,终止颜色);使用时加内核前缀eg:-webkit-linear-gradient,IE9不支持
径向渐变:radial-gradient(中心点位置,扩散程度,颜色域 | 百分比);由中心向四周发散,eg:-webkit-radial-gradient(50px 50px,起始颜色,终止颜色);-webkit-radial-gradient(center,起始颜色,终止颜色);
IE低版本兼容:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');1表示从左到右,0是从上到下,并且颜色值只能是6位哈希值
7、渐变练习代码部分:
your title name
1、线性渐变:-webkit-linear-gradient(方位,颜色域 | 范围百分比)
2、线性渐变-兼容IE低版本:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='6位哈希值',endColorstr='6位哈希值',GradientType='1/0');
3、径向渐变:radial-gradient(中心点位置,扩散程度,颜色域 | 百分比);
8、渐变preview:
关于“Html5中背景属性的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流