新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题
代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方
下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明
代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下
设置的方法和详细的操作步骤如下：
1、第一步，使用sublime
text2创建一个用于测试的新HTML页面，见下图，转到下面的步骤。
2、第二步，完成上述步骤后，在网页上添加标签和输入框，见下图，转到下面的步骤。
3、第三步，完成上述步骤后，预览效果，可以知道默认宽度为10，见下图，转到下面的步骤。
4、第四步，完成上述步骤后，通过设置size属性来修改宽度，见下图，转到下面的步骤。
5、第五步，完成上述步骤后，再次预览效果，宽度减小了，见下图，转到下面的步骤。
6、第六步，完成上述步骤后，如果修改其他内容需要添加“style”属性，见下图，转到下面的步骤。
7、第七步，完成上述步骤后，预览最终效果，可以看到宽度和高度已更改，见下图。这样，就解决了这个问题了。
color属性：设置文本文字颜色。用法如下：color：颜色值
color属性可以设置的合法颜色值包括：16进制颜色值（例：#ffffff），rgb颜色值【例：rgb(0,0,0)】，rgba颜色值【例：rgb(0,0,0,0.5)，0.5表示透明度】，hsl颜色值【例：hsl(120,65%,75%)】，hsla颜色值【hsl(120,65%,75%,0.3)，0.3表示透明度】。
2、css文本文字行高（行间距）的属性
line-height属性：设置行间的距离（行高）。用法如下：
line-height：值
具体cssline-height属性是如何设置文本文字的行间距，大家可以参考之前的文章【css如何设置行间距？css文本文字的行间距设置】，希望对大家有所帮助。
3、css设置文本文字的水平对齐方式的属性
text-align属性：设置元素中的文本文字的水平对齐方式。用法如下：
text-align:left||right||center||justify
left：设置文本文字左对齐。默认值：由浏览器决定。
right：设置文本文字右对齐。
center：设置文本文字居中对齐。
justify：实现两端对齐文本效果。
4、css文本缩进属性
text-indent属性：设置文本缩进。
具体csstext-indent属性是怎样设置文本缩进的，大家可以参考【css如何实现首行缩进效果？text-indent属性实现首行缩进】。
5、设置文本文字装饰效果
text-decoration属性：定义添加到文本的修饰。
说明：
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。
用法：
text-indent：none||[underline(下划线)||overline(上划线)||line-through(中划线)]||blink
none：默认值，定义标准的文本。
underline：定义文本下的一条线。
overline：定义文本上的一条线。
line-through：定义穿过文本下的一条线。
blink：定义闪烁的文本。
6、文本字符的大小写转换属性
text-transform属性：控制文本字符的大小写。
用法：
text-transform:uppercase(全大写)||lowercase(全小写)||capitalize(首字母大写)||none
7、文本文字间距的属性
word-spacing属性：设置文字或单词之间的间距，单词之间的间距=word-spacing+空格大小。
letter-spacing属性：设置字母间的间隔。
8、文本文字阴影的属性
text-shadow属性：向文本文字设置阴影
