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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: ทำ water mark อย่างง่ายด้วย css

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>

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

โดย tsukasaz » 12/06/2019 9:46 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>

ข้างบน