Tiêu đề với background-image

Trở về

  • 3,737

Sử dụng background-image cho tiêu đề, là một kỹ thuật đơn giản nhưng sẽ giúp nhiều trong việc làm hấp dẫn hơn cho một tiêu đề.

Background image repeat-x

Dạng tiêu đề với background-image

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
    background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
    font-size: 160%;
    font-weight: bold;
    padding: 0 10px 3px;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2</h2>
</body>
</html>

Hiển thị trình duyệt:

Download file để thực hành

Background image repeat-x với border

Dạng tiêu đề với background-imageborder

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
    background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
    border: 1px solid #ccc;
    font-size: 160%;
    font-weight: bold;
    padding: 5px 10px 3px;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2</h2>
</body>
</html>

Hiển thị trình duyệt:

Thử thêm border-top vào ta sẽ thấy tiêu đề dễ nhìn hơn.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
    background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
    border: 1px solid #ccc;
    border-top: 3px solid #f00;
    font-size: 160%;
    font-weight: bold;
    padding: 5px 10px 3px;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2</h2>
</body>
</html>

Hiển thị trình duyệt:

 

Với cách sử dụng tiêu đề linh hoạt như trên ta dễ dàng thêm bớt nội dung tiêu đề tùy thích.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
    background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
    border: 1px solid #ccc;
    border-top: 3px solid #f00;
    font-size: 160%;
    font-weight: bold;
    padding: 5px 10px 3px;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2<br />
Đây là dạng tiêu đề rất dài và linh hoạt</h2>
</body>
</html>

Hiển thị trình duyệt:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.