CSS3背景图像区域、定位、大小以及多重图像-前端基础知识与习题案例
CSS3中背景图像为background-clip、background-origin、background-size等属性的属性值进行控制,可以实现包括背景图像区域、背景图像定位、背景图像大小、多重背景图像等功能。这里主要对这些属性功能做详细介绍,并配合一些代码实践案例帮助读者深入理解。
一、背景图像区域(background-clip)
background-clip属性控制元素背景图像的绘制区域,其语法如下:
background-clip:border-box|padding-box|content-box;
默认值为border-box。
不同background-clip属性值的含义:border-box背景图像被裁剪到边框盒;padding-box背景图像被裁剪到内间距盒(内衬盒);content-box背景图像被裁剪到内容盒。
1-1单选题:将背景的绘制区域规定到内容框,应该使用background-clip属性中的哪个属性值?
Acontent-box
Bborder-box
Cpadding-box
Dnone-box
1-2双选题:在没有内填充(padding)的情况下,将背景的绘制区域从包含边框到不包含边框,如效果图所示,下列哪个代码可以实现?(选择两项)
背景绘制区域包含边框:
背景绘制区域不包含边框:
Abackground-clip:padding-box;
Bbackground-clip:content-box;
Cbackground-clip:border-box;
Dbackground-position:border-box;
1-3编程练习:
同学们,根据gif效果图补充代码,实现(可将gif图片另存后,用图片工具打开查看动态gif效果):
(1)当鼠标悬停在“border-box”区域,显示元素的背景图片被裁剪到边框盒;(2)当鼠标悬停在“padding-box”区域,显示元素的背景图片被裁剪到内间距盒;
(3)当鼠标悬停在“content-box”区域,显示元素的背景图片被裁剪到内容框;
(4)当鼠标不停留在这3个区域时,没有图片显示;
任务:
第一步:当鼠标不悬停在三个区域时,背景图片是隐藏的;
第二步:当鼠标悬停在“border-box”区域,元素显示的背景图片包含元素的边框;
第三步:当鼠标悬停在“padding-box”区域,元素显示的背景图片不会包含元素的边框,但会包含元素的内间距;
第四步:当鼠标悬停在“content-box”区域,元素显示的背景图片不会包含元素的边框和内间距;
请将将代码补充完整:
??
??
??
??
??
参考答案:
1-1
A
1-2
AB
1-3
参考代码:
????/?补充代码?/
????.border?div,
????.padding?div,
????.content?div?{
??????/?当鼠标不悬停在三个区域时,背景图像是隐藏的?/
??????display:?none;
????}
????.border:hover?div?{
??????background-clip:?border-box;
????}
????.padding:hover?div?{
??????background-clip:?padding-box;
????}
????.content:hover?div?{
??????background-clip:?content-box;
????}
二、背景图像定位(background-origin)
background-origin属性是指定background-position属性的起始相对位置。
语法:
background-origin:border-box|padding-box|content-box;
background-origin属性值的含义:border-box背景图像以边框盒左上角为起始相对位置;padding-box背景图像被裁剪到内间距盒(内衬盒);content-box背景图像被裁剪到内容盒。默认值:padding-box。
2-1单选题:在CSS3新增的背景图片属性中,哪个可以绘制背景图像的起点?
Abackground-clip
Bbackground-size
Cbackground-origin
Dbackground-position
2-2单选题:下列选项中哪个代码可以实现效果图中背景图片元素以元素内容左上角为原点向右偏移10像素,向下偏移10像素?
代码如下:
??
??
原始效果图(下)
偏移后效果图(下)
Abackground-position:10px10px;background-origin:content-box;
Bbackground-origin:border-box;
Cbackground-origin:content-box;
Dbackground-position:10px10px;background-origin:padding-box;
-3编程练习:
小伙伴们,根据效果图,写出代码,实现:
(1)当打开页面时,背景图片区域绘制到内边距框;
(2)当鼠标悬停在添加背景图片的元素上时,背景图片会被替换掉,新的背景图片的位置会以内容左上角为原点,向右、向下各偏移10px;
效果图如下:
鼠标悬停时效果:
任务
第一步:写出要设置背景图片的HTML元素;
第二部:给元素设置基本样式
Tip:宽、高、边框、内边距
第三部:给元素加上背景图片,背景图片显示范围从内边距框开始;
第四部:当鼠标悬停在元素上时,图片被替换,并且背景图片的起点从内容区域的左上角开始向左、向下偏移10个像素。
2-1C
2-2A
2-3
参考代码:
??
??background-origin
??
??
三、背景图片大小(background-size)
background-size属性指定背景图片的大小,语法如下:
background-size:length|percentage|cover|contain;
值 描述 length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为?auto(自动) percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小 contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小 注意:percentage中“将计算相对于背景定位区域的百分比-origin的属性值所代表的背景定位区域。
3-1在CSS3新增的background-size属性中,哪个属性值是以父元素的百分比来设置图像的宽度和高度的?(选一项)
Acover
Blength
Cpercentage
Dcontain
-2单选题:图片大小设置为多少,才能出现效果图一样的平铺效果?(选择一项)
????div?{
??????width:?500px;
??????height:?300px;
??????border:20px?solid?rgba(0,0,255,0.5);
??????padding:30px;
??????background-image:url(./萝莉.png);
??????background-size:?;????}
效果图如下:
Abackground-size:25%;
Bbackground-size:100%;
Cbackground-size:cover;
Dbackground-size:contain;
3-3编程练习
小伙伴们,根据效果图写出代码,实现:
(1)默认状态图片是不显示的;
(2)当鼠标悬停在不同的列表项上时,出现带背景图片的div元素,元素背景图片大小就是列表项上的标题文字。
比如:
当鼠标悬停在“50%50%”区域时,元素的背景图片是父元素大小的50%,效果图如下:
任务:
第一步:当鼠标悬停在属性值区域上时,属性值文字下方的元素要显示出来
Tips:注意伪类选择器与后代选择器的配合使用
第二步:鼠标悬停在不同属性值的区域上时,显示的元素的背景图片大小是不一样的,按照每个列表项的标题文字去进行设置,看下效果是否和你想的一样。
3-1
C
3-2
A
3-3
????ul?li:hover?div{
??????display:block;
????}
????ul?li.length?div{
??????background-size:100px?100px;
????}
????ul?li.percent?div{
??????background-size:50%?50%;
????}
????ul?li.cover?div{
??????background-size:cover;
????}
????ul?li.contain?div{
??????background-size:contain;
????}
四、多重背景图片
多重背景图片语法:
background-image:url(img1),url(img2),……;
按照层叠顺序,背景图片先前位置的图片在展示时,层叠位置靠后。
4-1编程练习
根据效果图,写出代码实现:
(1)元素边框颜色为半透明;
(2)背景图像从元素的内容框开始绘制;
(3)背景图像的大小是其父元素的90%;
请补充代码:
??
??background属性
??
任务
第一步:写出元素中的文本和背景图片;
第二步:给元素及其文本设置样式
(1)元素边框为红色透明
(2)元素内边距为20px
第三步:给元素背景图片设置样式,图片大小是其父元素大小的90%,并且从父元素的内边开始绘制。
??
??background属性
??
??
?????? 要做国内最大的IT技能学习平台 ???? ?? ??
五、背景图片附加属性
background-attachment属性设置背景图片是否固定或随着页面的其余部分滚动。
语法:
background-attachment:scroll|fixed|local|initial|inheir;
属性值
值 描述 scroll 背景图片随着页面的滚动而滚动,这是默认的。 fixed 背景图片不会随着页面的滚动而滚动。 local 背景图片会随着元素内容的滚动而滚动。 initial 设置该属性的默认值。 inherit 指定background-attachment的设置应该从父元素继承。?
可以通过背景缩写属性在一个声明中设置所有属性。
background:colorpositionsizerepeatoriginclipattachmentimage;
6-1编程练习
小伙伴们,根据效果图写出代码,用所学的背景图片属性只是,实现div中呈现多个背景图片
效果图如下:
任务
第一步:写出放置背景图片的HTML元素,给元素设置足够的宽和高;
第二部:给元素加入多个背景图片;
任务提示
Tips:
(1)多个图片路径之间的符号
(2)注意每个图片位置的设置
参考代码:
??
??background属性
??
??
??
????
??
??
|
|