Code tổng hợp

Làm thế nào để - văn bản vị trí trên một hình ảnh

Cách Đặt Văn bản trong Hình ảnh

Bottom Left

Top Left

Top Right

Bottom Right

Centered

<style> .container { position: relative; text-align: center; color: #ff0000; } .bottom-left { position: absolute; bottom: 8px; left: 16px; } .top-left { position: absolute; top: 8px; left: 16px; } .top-right { position: absolute; top: 8px; right: 16px; } .bottom-right { position: absolute; bottom: 8px; right: 16px; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <h2>văn bản vị trí trên một hình ảnh</h2> <p>Cách Đặt Văn bản trong Hình ảnh</p> <div class="container"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00P3s5Nlv-XqBHS9hCHhZO9oyJYmeEtfBaS-4vN0qO9arSj_b56KllRKHfF8HE5Nl_bJrJwufVicWmCmV-MRlrl35Usf1Hv-TmnbeBkndzqdZaJIPh2XP3sYb9gnGoL3kq0MBP0lZaCE/s1600/1239584_171290669739357_195491822_n+-+Copy+-+Copy+-+Copy.jpg" alt="Norway" style="width:100%;"> <div class="bottom-left">Bottom Left</div> <div class="top-left">Top Left</div> <div class="top-right">Top Right</div> <div class="bottom-right">Bottom Right</div> <div class="centered">Centered</div> </div>

Thanh trong suốt vào ảnh

Tôi đã nói dối để theo đuổi với nhân phẩm, nó biện pháp đầu tiên được mở rộng.

<style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial; font-size: 17px; } .container2 { position: relative; max-width: 0%; min-width: 100%; margin: 0 auto; } .container2 img {margin-bottom: -5px} .container2 .content { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 0px; } </style> <div class="container2"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzf1zloJ3u-FGIi5JmZ9a7pXiM2FmXSrKxzzIpQQF76Add_K8UWdFyYzHiWmG0574z4JlCn0iFjGHX8_nZ57-QFRj3PsZzpoebPlAtBW4MYptyDnUTWSigjj0XQi-VleGFVxf7WS4MmUo/s1600/giay+-+Copy+-+Copy.JPG" alt="Notebook" style="width:100%;"> <div class="content"> <p>Tôi đã nói dối để theo đuổi với nhân phẩm, nó biện pháp đầu tiên được mở rộng.</p> </div> </div>

Trình đơn thả xuống

Thả xuống Trình đơn thả xuống là trình đơn có thể chuyển đổi cho phép người dùng chọn một giá trị từ danh sách được xác định trước:

Link 1 Link 2 Link 3

<style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> <p>Thả xuống Trình đơn thả xuống là trình đơn có thể chuyển đổi cho phép người dùng chọn một giá trị từ danh sách được xác định trước: </p> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

Hiệu ứng lật ảnh.

<style> img:hover { -webkit-transform: scaleX(-1); transform: scaleX(-1); } </style> <p>Hiệu ứng lật ảnh.</p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUM9dVtOdFCSS-5nQS4r3dvdFsapVuG7I_7PGLi7AtfKnIYJz84Nbl7s10J4g2S13aZ4oQnckHz9D3Erlg749JGugEpsRqDTO1BB2nb3JgVLJdeh4VKoJQwkMJukssLR5ywfa7fd4c_k/w98-h140-p/00.jpg" alt="Paris" width="400" height="300"> <br />

Kéo xuống hiện STOP

<style> #myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 10px; } #myBtn:hover { background-color: #; } </style> <button onclick="topFunction()" id="myBtn" title="Stop">STop</button> <div style="background-color:#;color:;padding:1px">.</div> <div style="background-color:#;padding:1px 1px 0px">.</div> <script> // When the user scrolls down 0px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 1600 || document.documentElement.scrollTop > 1600) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script>

Viết văn bản ngang hinh ảnh

111111111111111

222222222222222

<style> .container { border: 2px solid #ccc; background-color: #eee; border-radius: 5px; padding: 16px; margin: 16px 0 } .container::after { content: ""; clear: both; display: table; } .container img { float: left; border-radius: 50%; } .container span { font-size: 20px; margin-right: 15px; } @media (max-width: 500px) { .container { text-align: center; } .container img { margin: auto; float: none; display: block; } </style> <div class="container"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOGi0O9c-mi14BsX4-kENHOvNtuAVhTXlAIHfxwBbjWyWCbUSRwMBNY8tW_1vQaFdJ-8LigNEjICngeBlVm6_b8TasmzXKf-fCJeYULOvgc-wYr4DvMeCRkkiuKEgdv8eX-dnEQ4IOzY/s1600/drums-icon+%25281%2529_edited-001+-+Copy+-+Copy.png" alt="Avatar" style="width:90px"> <p><span>111111111111111</span> <p>2222222222222</p> </div>

Liên Quân Mobile là tựa game thu nhỏ của Liên Minh Huyền Thoại trên di động, trò chơi hội tụ và kế thừa tinh hoa của trò chơi

<table width="100%"> <tbody> <tr> <td><a href="https://play.google.com/store/apps/details?id=com.garena.game.kgvn" title="Ảnh sex 14"> <img height="150" src="https://lh3.googleusercontent.com/N7q4xoPZzOs0Quv0Qzt7_WJclwCwF43VK6xLyI6zo4W6JiaFqJLNwrYa9KIhHY-AJk0x=w300-rw" title="Lien quan" width="150"></a> </td> <td width="100%"> Liên Quân Mobile là tựa game thu nhỏ của Liên Minh Huyền Thoại trên di động, trò chơi hội tụ và kế thừa tinh hoa của trò chơi </td> </tr> </tbody> </table> </font></td> </tr> </tbody> </table>