2014-01-30 15 views
18

Was ich brauche, ist Kreuzworträtsel transparente Wasserzeichen wie diese nur mit HTML und CSS zu erstellen. Hab keine Ahnung wie man das immer an einem Ort für ex behält: rechts unten im Browserfenster.Erstellen von Wasserzeichen mit HTML und CSS

Vielen Dank im Voraus

enter image description here

+0

Sie sollten Deckkraft: .6; zum Beispiel und absolute Position der div. –

+0

Für Wasserzeichen können Sie wahrscheinlich mit etwas Styling für Divs gehen und positionieren Sie es an der Stelle, die Sie mögen. Da wollte man nur html und css das können. –

+0

@srekoble vielleicht jfiddle? – demonoid

Antwort

29
#watermark 
{ 
position:fixed; 
bottom:5px; 
right:5px; 
opacity:0.5; 
z-index:99; 
color:white; 
} 

jSFiddle

+0

Ich brauche etwas, das immer den gleichen Platz auch beim Scrollen – demonoid

+0

^Das tut es tut - Entschuldigung die Fiddle didn nicht aktualisieren. Probieren Sie es jetzt. – ElendilTheTall

3

es fest zu machen: Versuchen Sie, diese Art und Weise,

jsFiddleLink: http://jsfiddle.net/PERtY/

<div class="body">This is a sample body This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample bodyThis is a sample bodyThis is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    v 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    This is a sample body 
    <div class="watermark"> 
      Sample Watermark 
    </div> 
    This is a sample body 
    This is a sample bodyThis is a sample bodyThis is a sample body 
</div> 



.watermark { 
    opacity: 0.5; 
    color: BLACK; 
    position: fixed; 
    top: auto; 
    left: 80%; 
} 

Zur Nutzung absolut:

.watermark { 
    opacity: 0.5; 
    color: BLACK; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

jsFiddle: http://jsfiddle.net/6YSXC/

2

Sie opacity:0.5;//what ever you wish between 0 and 1 für diese verwenden.

Arbeits Fiddle

-1

Möglicherweise kann dies für Sie eine große Hilfe sein.

div.image 
{ 
width:500px; 
height:250px; 
border:2px solid; 
border-color:#CD853F; 
} 
div.box 
{ 
width:400px; 
height:180px; 
margin:30px 50px; 
background-color:#ffffff; 
border:1px solid; 
border-color:#CD853F; 
opacity:0.6; 
filter:alpha(opacity=60); 
} 
    div.box p 
{ 
margin:30px 40px; 
font-weight:bold; 
color:#CD853F; 
} 

Überprüfen Sie this link einmal.