web-dev-qa-db-ja.com

HTMLとCSSを使用して透かしを作成する

私が必要なのは、htmlとcssのみを使用して、このようなクロスWebサイトの透明な透かしを作成することです。たとえば、ブラウザウィンドウの右下側など、常に1つの場所に保持する方法がわかりません。

前もって感謝します

enter image description here

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

jSFiddle

37
ElendilTheTall

修正するには：この方法を試してください、

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%;
}

絶対を使用するには：

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

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

4
Arunkumar Srisailapathi

これにはopacity:0.5;//what ever you wish between 0 and 1を使用できます。

ワーキング フィドル

2
Green Wizard