任务4.2使用CSS编辑网页中的图片.pptxVIP

任务4.2使用CSS编辑网页中的图片

任务介绍“美人图”图片展示，背景色是渐变色，整体效果如梦如幻

任务分析文本使网页的内容得到充实，图像使网页的内容更加丰富多彩。背景的渐变色如何设置的？图片如何排列的，背景的透明是怎么调整的，掌握修饰图像的CSS背景属性，能够对背景图像进行编辑。【思政要素】在Web页面设计中，可以融入中华优秀传统文化的元素，如中国风图案、传统色彩等。这样可以培养学生的文化自信，同时也可以弘扬中华优秀传统文化，让其在一代代学子中悠久流传。。

1文本样式设置图片编辑

插入图像的编辑行内块级元素就是同时具备行内元素、块级元素的特点。本质仍是行内元素，但是可以设置width及height属性Img标签的设置img、input标签就是这种行内块级标签。

背景图片2

1.背景颜色background-colorbackground-color属性设置背景颜色。语法：background-color:颜色取值；颜色取值可以预定义的颜色值、十六进制#RRGGBB或RGB代码（r，g，b）。background-color的默认为透明，此时子元素会显示父元素的背景。在CSS3中，引入了RGBA模式,A就是alpha参数,实现对颜色与背景颜色实现不透明的设置,aipha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。例如：background-color:rgba(11,66,99,0.2);除了使用RGBA模式，也可以opacity属性来控制元素呈现出透明效果。例如：opacity:0.5；opacity属性用于定义元素的不透明度，参数表示不透明度的值，它是一个介于0~1的浮点数值。其中，0表示完全透明，1表示完全不透明，样例中的0.5则表示半透明。

2.背景图像—background-imagebackground-image用来设定一个元素的背景图像。语法：background-image:url(图像地址）；图像地址可以设置成绝对地址，也可以设置成相对地址。举例演示【实例5-3】背景颜色与背景图片的设置。

3.背景重复—background-repeat背景重复属性也称为背景图像平铺属性，用来设定对象的背景图像重复以及如何铺排。语法：background-repeat：取值；取值范围：repeat|no-repeat|repeat-x|repeat-y。其中，repeat背景图片横向和竖向都重复；no-repeat背景图片横向和竖向都不重复；repeat-x背景图片横向重复；repeat-y背景图片竖向重复。background-repeat属性和background-image属性连在一起使用。只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。【实例】背景图片与背景重复的设置。

4.背景位置—background-position背景位置属性用于指定背景图像的最初位置。当设置background-repeat为no-repeat时，就能发现图像默认以元素的左上角为基准点显示。语法：background-position:位置取值;取值范围：［百分比|长度］{1,2}|[left|center|right]|[top|center|bottom]。取值范围包括两种，一种是采用数字，即[百分比|长度]{1,2}。另一种是关键字描述，即[left|center|right]|[top|center|bottom][百分比|长度]{1,2}：使用确切的数字表示图像位置，使用时首先指定横向位置，接着是纵向位置。百分比和长度可以混合使用，设定为负值也是允许的。默认取值是0%0%。[left|center|right]|[top|center|bottom]:left，center，right是横向的关键字，横向表示在横向上取0%,50%,100%的位置；top，center，bottom是纵向的关键字，纵向表示在纵向上取0%,50%,100%的位置。注意：background-position属性和background-image属性连在一起使用。

5.背景附件—background-attachment背景附件属性用来设置背景图像是随对象内容滚动还是固定的。语法：background-attachment:scroll|fixed;其中，scroll表示背景图像是随对象内容滚动，是默认选项；fixed表示背景图像固定在页面上静止不动，只有其他的内容随滚动条滚动。注意：background-attachment属性