watermark - 如何使用Bootstrap放置水印-6ren

watermark - 如何使用Bootstrap放置水印

转载作者：行者123 更新时间：2023-12-04 03:16:55

39

4

我是引导世界的新手。有没有办法使用 Bootstrap 放置水印？如果有，请帮助我提供示例代码:

<!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>

最佳答案

您可以在 Body Tag 中放置水印或在 div 中使用此代码。
根据您的要求将不透明度从 0 更改为 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>

关于watermark - 如何使用Bootstrap放置水印，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40239212/

39

4

0

文章推荐： visual-studio-2015 - SSIS Odata 连接成功但集合未加载

文章推荐： asp.net-mvc - 自定义授权 MVC 3 和 Ninject IoC

文章推荐： ant - 打印/访问当前正在执行的 Ant 目标的名称

文章推荐： julia - 组织 Julia 源代码树的正确方法是什么？

带过滤器的 FFMPEG 水印
我正在尝试使用水印并使用复杂过滤器应用 Yadif，但我无法弄清楚如何使用以下语法应用 Yadif ffmpeg -i "source:" -i C:\logo.png -c:v libx264 -p
PHP 水印 - Zubrag
我正在使用 zubrags PHP 水印脚本(附在下面)，它工作得很好，除非我尝试使用 PNG-24 作为我的水印。生成的图像有一个乱码、不透明的水印。我想知道是否有人可以帮助解释我需要在下面的脚本中
iPhone，如何将一张图像叠加到另一张图像上以创建要保存的新图像？ (水印)
基本上，我想拍摄用户从照片库中选择的图像，然后应用水印，即右下角的一个三角形，上面有应用程序名称。我已经在 Photoshop 中使用透明层制作了第二张图像。我尝试了一个函数，我不记得它的确切名称，
python - 如何从蒙版图像中删除图章/水印？
Closed. This question needs to be more focused。它当前不接受答案。想改善这个问题吗？更新问题，使其仅关注editing this post的一个问题。
swift - 在PDF中绘制NSString(水印)
这个问题我已经发了很多次了，但还是找不到正确的答案。我的目标是加载 PDF(扫描的调查问卷页)，用页码标记每个页面，并将每个页面保存在单独的 JPEG 文件中以供以后使用。除了未绘制 NSString
php - CodeIgniter 水印
你好，我的代码有问题 $obj = new stdClass(); $obj->cat_id = !empty($_POST['cat_id']) ? $_POST['cat_id']
ruby-on-rails - 如何基于模型实例属性路径使用回形针动态生成图像叠加层/水印
SO 上有很多类似的问题/答案，但似乎没有一个能解决我的问题。我的目标是使用 Paperclip 为图像生成“动态水印”(用户头像覆盖在另一张图像上)。我遇到的问题是我无法获得模型的“user_id
c# - 屏幕截图后图像上的 Unity 水印
我想在我的图片上添加水印，这是我用来截图的代码。有人可以教我如何在图像中添加水印吗？我想在图片的右上角有一个小 Logo 。我正在尝试研究是否可以实现我在 Canvas 中保留的内容，以便在截取屏幕
ffmpeg 视频 + 水印 + 替换音频不起作用
我有以下命令: ffmpeg -ss 00:00:30 -i "$i" -i ../audio.mov -map 0:0 -map 1:0 -to 30 -vf "fade=in:0:24, fade
FFmpeg幻灯片+音频+水印+保持纵横比
我正在尝试从一些图片以及现有的 mp3(复制)制作幻灯片。图片尺寸不同，但我希望视频输出为 16:9 纵横比和 3840x2160。我也想要水印。重要的是不要拉伸(stretch)图片。我试过这个代
仅用于打印的 PDF 水印，以编程方式
我已经可以给任何 PDF 加水印，里面的图像，一切正常，但现在我只需要在打印 PDF 时才显示水印......这可能吗？如何？我当然需要以编程方式执行此操作。最佳答案对于 future 的读者，
页面上的 ASP.NET 水印
有没有办法在整个网页上创建浅色透明水印？一个留在屏幕上，即使它滚动？我的想法是创建一个 .PNG 位图并使用带有样式表的 DIV 标签，该样式表将我的 PNG 设置为背景图像，并设置绝对位置。问题是，
iOS - block 截图/水印
是否可以屏蔽应用程序的屏幕截图(电源 + 菜单按钮)？如果没有，此屏幕截图是否有可能收到水印？问候，克劳迪奥最佳答案创建屏幕截图是一种系统行为，您不能覆盖它。重复 Notification o
jquery - 图像中的 colorBox 水印
所以我一直在寻找如何为图像添加带有 colorBox 的水印，我在谷歌的第一个结果中找到了一个较旧的 colorBox 组，下一个答案是: Jack Moore 10/3/09 Ok, this sh
html - 水印 CSS 在打印中不起作用
我有以下 CSS， #duplicateCopy { -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg);
iOS - 区分PDF中的背景文本(水印)和真实文本
我有一个 pdf在它的背景上有水印。当开始扫描以在背景中突出显示带有水印或注释的任何单词时，它会被选中，因为它首先在触摸区域中找到。我正在使用 CGPDFScanner 扫描文本。我的问题是如何检
php - 选择菜单的联系表格 7 水印
我正在寻找一种在选定字段上放置水印的方法。那是行不通的-> [select* c_type class:ic watermark "choose type" "a" "b" "c"] 为了放置验证失
android - FFMpeg 为视频添加多个 Gif/水印
我正在尝试向视频添加各种 Gifs/水印，但我无法让它正常工作。我们假设视频时长为 60 秒，我正在添加一张 Gif 图片。输出看起来正确，声音打开，gif 动画，视频没有停止。这是代码:
filter - FFmpeg AVFilter 以编程方式覆盖/水印
我正在尝试使用 FFmpeg 以编程方式将图像或视频叠加在另一个视频的顶部。似乎 AVFilter 可以做到这一点。有很多关于如何使用命令行执行此操作或类似操作的示例，但是，除了 doc/examp
javascript - jQuery 水印 StackOverflow 之类的？
我正在尝试实现类似 StackOverflow 的水印功能。我正在使用 jquery-watermark为了这。我遇到的问题是水印文本随着输入元素获得焦点而消失，这在 SO 中不会发生(我也不希望在

首页

博学

6Ren·AI

商城

watermark - 如何使用Bootstrap放置水印