Tiêu đề với background icon nằm bên phải

Trở về

  • 1,784

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:

Download file để thực hành

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>

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.