ブートストラップを使用して透かしを入れる方法

私はブートストラップの世界に初心者です。ブートストラップを使って透かしを入れる方法はありますか？ある場合は、サンプルコードで私を助けてください：ブートストラップを使用して透かしを入れる方法

<!DOCTYPE html> 
<html lang="en">  
    <head> 
     <title>Watermark sample code</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <br> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        Watermark sample code 
       </div> 
       <div class="panel-body"> 
        <div class="row"> 
        <div class="col-lg-12"> 
         First Line 
        </div> 
        <div class="col-lg-12"> 
         Second Line 
        </div> 
        <div class="col-lg-12"> 
         Third Line 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

出典

2016-10-25 Soumyaranjan Rath

あなたはボディタグに透かしを入れるか、divの内側にこのコードを使用することができます。 1

body { 
 
    display: block; 
 
    position: relative; 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
body::after { 
 
    content: ""; 
 
background:url(https://www.google.co.in/images/srpr/logo11w.png) no-repeat; 
 
    opacity: 0.2; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    height:100%; 
 
    width:100%; 
 
}

<!DOCTYPE html> 
 
<html lang="en">  
 
    <head> 
 
     <title>Watermark sample code</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body>  
 
     <div class="container"> 
 
      <br> 
 
      <div class="panel panel-primary"> 
 
       <div class="panel-heading"> 
 
        Watermark sample code 
 
       </div> 
 
       <div class="panel-body"> 
 
        <div class="row"> 
 
        <div class="col-lg-12"> 
 
         First Line 
 
        </div> 
 
        <div class="col-lg-12"> 
 
         Second Line 
 
        </div> 
 
        <div class="col-lg-12"> 
 
         Third Line 
 
        </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>  
 
    </body> 
 
</html>

出典

2016-10-29 06:34:02

から0の間からあなたの要件ごとに変更不透明度はありがとうございます。それは正常に動作しています。 –

ブートストラップを使用して透かしを入れる方法

答えて

関連する問題