Tiêu đề với background icon nằm bên phải
Việc xử lý background icon như thế nào sẽ tác động đến bộ mặt của trang web, vì tiêu đề thường đưa thông tin quan trọng, và có nhiều dạng như nhau trong cùng một trang. Icon nằm bên phải cũng là một dạng thường dùng.
Background image có icon nằm bên phải
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_pencil.gif) no-repeat right bottom;
font-size: 160%;
font-weight: bold;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Headline với background icon nằm giữa.
Sử dụng thêm background màu trắng cho <span> để che lấp phần background bên dưới text.
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_pencil.gif) no-repeat right top;
font-size: 160%;
font-weight: bold;
padding: 13px 40px 3px 0;
}
.headline span {
background-color: #fff;
padding-right: 10px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>