css3当背景图片大于或小于元素时,会呈现什么效果？

html-css012

css3当背景图片大于或小于元素时,会呈现什么效果？,第1张

这是一个数学问题。

当盒子模型和图片比例不一致时，要保持比例显示会出现两种情况：

一种是覆盖裁剪background-size: cover，即以短边为标准，图片缩放铺满整个容器的宽高，多出来的部分会裁剪掉；

另一种是完整包含background-size: contain，即以长边为标准，图片缩放完全展示在容器的内部，不足的部分会填充空白。

当盒子模型和图片比例不一致时，不保持比例显示可对图片进行拉伸以铺满整个容器的宽高background-size: 100% 100%；或对高进行拉伸background-size: auto 100%或对宽进行拉伸background-size: 100% auto ；或设置固定数值background-size: 20px 30px 。

~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。

h3~h5选择前面有<h3>元素的每个<h5>元素，即选择h3之后出现的所有h5，两种元素必须拥有相同的 父元素 ，但h5不必紧随h3。

说明：这里的h5，h3也可以换成实际项目中的其他标签的类名、标签名或id等。

~（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。

大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素，其中B元素是A元素的第一代。

.myDiv>h3选择类名名为myDiv里面的第一代h3。

css中 >表示子元素选择器（Child selectors）。与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，而不管孙辈、玄孙辈的元素。

示例如下：

创建Html元素

<div class='test'>

<div>

我是长子

<div>我是长孙</div>

</div>

<div>我是次子</div>

<span>子代元素设置了边框样式，而孙代不受影响。</span> 

</div

设置css样式

div{padding:10pxmargin:5px 0border:1px solid green}

div.test{width:200pxheight:200px}

div.test > div{border:3px solid #ebecbe}

span{color:#999font-style:italic}

观察显示效果