ทำ water mark อย่างง่ายด้วย css

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
jataz2
PHP Super Member
PHP Super Member
โพสต์: 225
ลงทะเบียนเมื่อ: 22/02/2011 11:48 am

ทำ water mark อย่างง่ายด้วย css

โพสต์โดย jataz2 » 12/06/2019 9:12 am

โค้ด: เลือกทั้งหมด

<html>
  <head>
  <style type="text/css">
          div#watermark {
                position: fixed;
                bottom: 10px;
                right: 10px;
                font-size: 8em;
                padding: 0.1em;
                background: white;
                color: gray;
                opacity: 0.5;
            }
            div#watermark span {
                color: black;
                text-decoration: none;
                background-color:cornflowerblue;
               transform:rotate(320deg);
              -webkit-transform:rotate(320deg);
            }
    </style>
 </head>
 <body>
        <h1> hello</h1>
        <div id='watermark'>
            <span>ระบุคำที่เป็น water mask</span>
        </div>
 <body>
</html>

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 9653
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: ทำ water mark อย่างง่ายด้วย css

โพสต์โดย tsukasaz » 12/06/2019 9:46 am

เอาไปใส่ในรูปภาพได้ไหมครับ ทำยังไงครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
jataz2
PHP Super Member
PHP Super Member
โพสต์: 225
ลงทะเบียนเมื่อ: 22/02/2011 11:48 am

Re: ทำ water mark อย่างง่ายด้วย css

โพสต์โดย jataz2 » 12/06/2019 5:59 pm

<html>
<head>
<style type="text/css">
div#watermark {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 8em;
padding: 0.1em;
background: white;
color: gray;
opacity: 0.5;
background:url(https://www.google.co.in/images/srpr/logo11w.png);
transform:rotate(320deg);
-webkit-transform:rotate(320deg);
}
div#watermark span {
color: black;
text-decoration: none;

}
</style>
</head>
<body>
<h1> hello</h1>
<div id='watermark'>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</div>
<body>
</html>


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 8 และ บุคคลทั่วไป 0 ท่าน