大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

HTML与CSS中背景相关属性怎么用

小编给大家分享一下HTML与CSS中背景相关属性怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联公司自2013年起,先为吴桥等服务建站,吴桥等地企业,进行企业商务咨询服务。为吴桥企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

一.背景尺寸属性

1.什么是背景尺寸属性

背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小

background-size:xxxx;

取值:

1.具体像素>>background-size:200px100px;

2.百分比>>background-size:100%80%;

3.宽度等比拉伸>>background-size:auto100px;

4.高度等比拉伸>>background-size:100pxauto;

5.cover>>background-size:cover;

5.1告诉系统图片需要等比拉伸

5.2告诉系统图片需要拉伸到宽度高度都填满元素

6.contain>>background-size:contain;

6.1告诉系统图片需要等比拉伸

6.2告诉系统图片需要拉伸到宽度高度都填满元素(只保证一边填满)

background-size

二.背景图片定位区域属性

background-origin:告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;

取值:

1.padding-box:默认值>>background-origin:padding-box;告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;

2.border-box>>background-origin:border-box;从border位置开始

3.content-box>>background-origin:content-box;从content位置开始

113-背景图片定位区域属性

  • 默认
  • padding
  • border
  • content

背景图片定位区域属性

三.背景绘制区域属性

background-clip:xxx;背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的,默认情况下会从border区域开始绘制背景

114-背景绘制区域属性

  • 默认
  • padding
  • border
  • content

背景绘制区域属性(红色为绘制区域)

四.多重背景图片

先添加的背景图片会盖住后添加的背景图片

元素c3之后可以设置多张背景图片

多张背景图片之间用逗号隔开即可

background:url("images/animal1.png")no-repeatlefttop,url("images/animal2.png")no-repeatrighttop,url("images/animal3.png")no-repeatleftbottom;

注意点:

先添加的背景图片会盖住后添加的背景图片

background:url("images/animal1.png")no-repeatlefttop,url("images/animal2.png")no-repeatrighttop,url("images/animal3.png")no-repeatleftbottom,url("images/animal4.png")no-repeatrightbottom,url("images/animal5.png")no-repeatcentercenter;

建议在编写多重背景时拆开编写

background-image:url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");background-repeat:no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,leftbottom;

完整代码如下:

115-多重背景图片

多重背景图片

四.多重背景图片联系

先添加的背景图片会盖住后添加的背景图片

116-多重背景图片-练习



HTML与CSS中背景相关属性怎么用HTML与CSS中背景相关属性怎么用

以上是“HTML与CSS中背景相关属性怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前标题:HTML与CSS中背景相关属性怎么用
文章转载:http://dzwzjz.com/article/jdjpgg.html
在线咨询
服务热线
服务热线:028-86922220
TOP