写在图像文本（与半透明的背景）

一个效果，这是比较常见的，看网站和下一代，都写在了图像所谓的叠加，往往伴随着一个黑暗的背景半透明博客。 下面是一个例子：

在这篇文章中，我们充分利用我们的使用CSS图像覆盖。

首先要做的是创造一个这样的HTML结构：

 <div class="boximg">



  



 <img border="0" src="tramonto.jpg"/>



  



 <div class="boxtesto">



    



 <span class="testo">一个美丽的夕阳！</ SPAN>



  



 </ DIV>







 </ DIV>

正如你可以看到我创建了一个DIV容器（带班“。Boximg”）在我的位置我的形象和一个新的div（带班“。Boxtesto”），其中又包含跨越，标志着文本要应用。

我们现在看到的CSS，重大，工作地点：

 。Boximg {



  



位置：亲属;



  



宽度：400像素; / *图像的相同的宽度* /



  



高度：300像素; / *相同的图像高度* /







 }







 {div.boxtesto



  



位置：绝对;



  



底部：0px;



  



左：0px;



  



宽度：100％;



  



背景：RGB（0，0，0）;



  



背景：RGBA（0，0，0，0.6）;







 }







 {span.testo



  



填充：10px;



  



颜色：＃FFFFFF;



  



字体：大胆24px/45px黑体，无衬线;



  



字母间距：- 1px的;







 }

存储盒（“。Boximg”）具有相同的大小和相对定位的，目的是适应的形象。
文本的储物盒（“。Boxtesto”）是我们工作的重点是绝对定位，这将删除的元素的正常流动，并在较低的位置，其容器的左上角，显然有一个宽度为100％占据整个可用空间水平。 有趣的话， 背景的两个定义使用RGB和RGBA，借以确定暗背景和半透明。
该跨度。“文字”，最后，有风格化的唯一目的，以文字和应用有点“填充。

• <<
• 1
• 2
• >>