水印将内容对齐到最左端

Posted 2023-03-05

【中文标题】水印将内容对齐到最左端

【英文标题】：Watermark align content to the extreme left

【发布时间】：2021-08-01 23:32:46

【问题描述】：

我制作了一个与网站主要内容左侧对齐的水印。虽然由于缺少一些 CSS 属性，我无法正确调整它。 这是网站的当前外观：

但是当我尝试最小化屏幕或进入移动模式时，这个水印覆盖在主要内容之上。我希望在屏幕的最左侧有一个水印，当它最小化时它应该消失或者不必覆盖主要内容。

这是我目前编写的代码：

<div id="background">
    <p id="bg-text">Add watermark here.</p>
</div>
//CSS:
#background
  position:fixed;
  z-index: 100000;
  background:white;
  top: 400px;
  left: 0px;


#bg-text

    color:lightgrey;
    font-size:10px;
    transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);

不知道为什么这会干扰主要内容。它应该用作水印并在不需要时消失。

【参考方案1】：

要获得响应，您必须联系媒体查询。 基本上，您必须为不同的屏幕尺寸定义断点，并在每个断点后面定义 css 代码，以告诉您的网站如何处理它们。

Responsive Web Design - Media Queries

Media Queries: How to target desktop, tablet, and mobile? （在此处查看 cmets 和答案）

【讨论】：

如何证明我的水印在最左边？我的 CSS 正确吗？因为我不这么认为。

看看这个小提琴：jsfiddle.net/w8Lxpaqv也许它会对你有所帮助。基本思想是，将背景设置为固定位置，并将水印以绝对位置放置在左侧。

【参考方案2】：

这可以通过引导断点和显示实用程序类来完成。查看此链接以了解更多信息： https://getbootstrap.com/docs/4.0/utilities/display/

尝试将这些显示实用程序类应用到您的代码中。使用 d-none 将隐藏移动设备上的 div。然后类 d-md-block 将在中等大小及以上的屏幕分辨率上显示此 div。

<div id="bg-text" class="d-none d-md-block">
    Add watermark here.
</div>