CSS - Viết Chữ Lên Ảnh Nền

Ta có 1 ảnh làm nền, h ta muốn ghi chữ lên đó thì ta làm sao ? CSS sẽ giúp bạn làm điều này.

Demo: giả sử ta có ảnh là "thiennhien.jpg" chèn ở 1 ví trí nào đó của trang Web, h ta ghi chú thích lên ảnh đó.

Thưc hiện : tạo fiel "demo.html" có nội dung như sau:

<html>
<head>
<style type="text/css">
div.background
{
width:500px; /* width va height la kich thuot buoc anh */
height:250px;
background:url(thiennhien.jpg) repeat;/* anh muon nen */
border:5px solid black;/* duong vien cho anh */
}
div.transbox
{
width:150px;
height:35px;
margin:100px 200px;/* vi tri chu so phai tren, trai cua khung */
background-color:#rrffbb; /* mau khung nen van ban*/
border:0px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:9px 9px;
text-align:center;
font-weight:bold;
color:red;
}
</style>
</head>

<body>
/* dat 3 the sau noi muon chen anh */
<div class="background">
<div class="transbox">
<p>Noi Dat Van Ban </p>
</div>
</div>

</body>
</html>

Mở file"demo.html" bằng trình duyệt, ta có kết quả như hình sau:

Hình minh họa:

Demo : cải tiến từ code trên .

<html>
<head>
<style type="text/css">
div.background
{
width:500px; /* width va height la kich thuot buoc anh */
height:250px;
background:url(thiennhien.jpg) repeat;/* anh muon nen */
border:5px solid black;/* duong vien cho anh */
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-top:50px;/* co the thay doi px*/
margin-left:50px;/*co the thoi doi px*/
margin-right:50px;/* co the thoi doi px*/
background-color:#d0f0f6;/* co the thay doi mau cho phu hop*/
text-align:center;
padding:50px;/* co the thoi doi px */
}
</style>
</head>

<body>
/* dat 3 the sau noi muon chen anh */
<div class="background">
<div class="container">
<div class="center_div">
<p>Noi Dat Van Ban </p>
</div>
</div>
</div>

</body>
</html>