Viết chữ đè lên ảnh trong HTML

CSS là một công cụ rất mạnh, hoạt động tốt nhất khi được giữ ở mức đơn giản nhất có thể. Thật không may, có rất nhiều ứng dụng WYSIWYG và các trình soạn thảo HTML khác tạo ra CSS đơn giản.

Một yêu cầu phổ biến là có thể hiển thị văn bản HTML trên một hình ảnh đã được nhúng trên trang. Có một số giải pháp hợp lệ sử dụng bảng hoặc CSS.

     1. Sử dụng TABLE để phủ văn bản lên hình ảnh

Giải pháp HTML đã có từ Netscape 3 và khá đơn giản để thực hiện, nhưng không quá linh hoạt như các tùy chọn gần đây.

Ví dụ:

<table width="500px" height="300px" background="https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg" cellpadding="5" cellspacing="0">
<tr>
<td valign="bottom">
<p><b><font color="#ffffff">
(Đây là đoạn văn nằm trên hình ảnh)
</font></b></p>
</td>
</tr>
</table>

See the Pen abNZxVG by DavidKhai (@davidkhai) on CodePen.dark

 

Lưu ý: Nhiều năm trước đây là một cách tiếp cận mới lạ, nhưng ngày nay nó rất không được khuyến khích.

      2. Sử dụng CSS để phủ văn bản lên hình ảnh

Quả thực có một giải pháp đơn giản hơn, linh hoạt hơn. Thay vì dùng BẢNG, chúng tôi sử dụng thuộc tính thẻ DIV và CSS để đặt văn bản lên hình ảnh.

Ví dụ:

<div style="position: relative; background: url(https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg); width: 500px; height: 300px;">

<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">
<p>(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía dưới bên trái)</p>
</div>

<p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;">
(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía trên bên phải)
</p>

</div>

See the Pen GRZqLdK by DavidKhai (@davidkhai) on CodePen.dark

 

Như bạn có thể thấy, chúng tôi có thể đặt bất kỳ số phần tử con nào trong div. Trong trường hợp này, một div chứa các đoạn văn bản (dưới cùng bên trái) và một đoạn văn bản (trên cùng bên phải).

Nếu không có phần tử chứa , tất cả vị trí sẽ liên quan đến khung nhìn (góc của màn hình). Điều này kết hợp với position: fixed có thể tạo ra các phần tử nằm ở một góc của màn hình và không di chuyển khi trang cuộn

     3. Tách thuộc tính style ra khỏi nội dung

Thông thường, bạn sẽ muốn có CSS ​​của mình trong một tệp riêng biệt hoặc ít nhất đó là khối kiểu riêng thay vì cùng dòng với HTML. Điều này có thể dễ dàng đạt được bằng cách thêm các class CSS cho các phần tử chứa nội dung.

Ví dụ:

<style type="text/css">

  .outer {
    position: relative;
    background: url(https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg);
    width: 500px;
    height: 309px;
  }
  .bottomleft {
    position: absolute;
    bottom: 0;
    left: 0.5em;
    width: 400px;
    font-weight: bold;
    color: #fff;
  }
 .topright {
    position: absolute;
    top: 1em;
    right: 2em;
    width: 120px;
    padding: 4px;
    background-color: #fff;
    font-weight: bold;
    font-size: 11px;
  }

</style>

<div class="outer">
<div class="bottomleft">
<p>(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía dưới bên trái)</p>
</div>
<p class="topright">(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía trên bên phải)</p>
</div>

See the Pen XWdKQBE by DavidKhai (@davidkhai) on CodePen.dark

 

Kết quả là không đổi so với ví dụ trước, nhưng giờ đây việc duy trì dễ dàng hơn nhiều vì HTML và CSS có thể được chỉnh sửa độc lập.

     4. Hiển thị văn bản trên hình ảnh khi di chuột

Đôi khi bạn chỉ muốn văn bản xuất hiện khi di chuột lên ảnh . Một cách hay để đạt được điều này là gói hình ảnh trong một liên kết và sử dụng thuộc tính title để lưu trữ chú thích chúng.

Trong ví dụ dưới đây, bạn có thể thấy điều này hoạt động. Chúng tôi đã đặt liên kết ngoài thành position: absolute và sử dụng thuộc tính tiêu đề attr (tiêu đề) để tạo một số nội dung được tạo và đặt nó trên hình ảnh.

Nội dung được tạo ban đầu có độ mờ opacity: 0 và sau đó được hiển thị bằng cách sử dụng trạng thái di chuột.

Tính năng làm mờ chậm có thể vẫn không hoạt động trong một số trình duyệt vì chúng không hỗ trợ hiệu ứng chuyển tiếp trên nội dung đã tạo. Nó sẽ mờ dần trong Firefox 23.0.

Ví dụ:

<style type="text/css">

  a.hovertext {
    position: relative;
    width: 500px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext::after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.5em 20px;
    width: 460px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
  }
  a.hovertext:hover::after, a.hovertext:focus::after {
    opacity: 1.0;
  }

</style>

<p><a class="hovertext" href="#" title="Đây là đoạn text sẽ xuất hiện khi hover vào hình ảnh"><img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg" width="500" height="310" border="0" alt=""></a></p>

See the Pen dyMXLaL by DavidKhai (@davidkhai) on CodePen.dark

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *