英文:
CSS background-image: never show the bottom 35 pixels of the image
问题
我的HTML模板（响应式，使用Bootstrap创建）具有具有背景图像的页眉。以下是一个简化版本（<header>及其CSS是精确的副本，其余是简化的）：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="bgimage" style="background-image: url('https://i.stack.imgur.com/hjPqu.png'); background-position: 50% 0%;">
<h1 class="display-1 text-center">this is the title</h1>
</header>
<p>this is the content</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
网站有许多带有图像库的页面。对于每个图库页面，我选择一个图库图像并将其用作页眉中的background-image，因此每个页面都有不同的页眉图像，并根据观看者的屏幕分辨率，图像的不同部分对观看者可见/不可见。
然而，所有图库图像都带有我的网站标志，位于右下角，就像我在示例中使用的图像一样。由于我在页面标题中重复使用相同的图像文件，有时整个标志或其中的一部分会出现在页眉中，我想避免这种情况。如果您运行上面的代码片段，请单击“全屏”链接并调整浏览器大小，您将看到标志出现/消失。
标志的大小始终相同，距离图像底部的像素数也相同，因此只需完全“隐藏”图像底部的35像素即可。
因此，这是我的问题：是否有一种方法可以定义background-image，使图像的底部35像素永远不可见？即使我设置background-position: bottom，我希望看到图像的可见部分距离实际底部35像素，以便我的网站标志被隐藏。
我看过这个问题，但我不能仅以像素为单位设置大小，因为我的图像具有许多不同的尺寸。
英文:
My HTML template (responsive, created with Bootstrap) has a header with a background image.
Here's a simplified version (the <header> and its CSS are exact copies, the rest is simplified):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bgimage {
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size:cover;
}
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="bgimage" style="background-image: url('https://i.stack.imgur.com/hjPqu.png'); background-position: 50% 0%;">
<h1 class="display-1 text-center">this is the title</h1>
</header>
<p>this is the content</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
The website has many pages with image galleries.
For each gallery page, I pick one of the gallery images and use it as the background-image in the header, so each page has a different header image.
(and the background-position: x% y% values are also set per page, depending what makes sense for the respective image)
So I have:
- many different header images
- many different background positions
- depending on the viewer's screen resolution, different parts of the respective header images are visible/invisible to the viewer
However:
All of the gallery images are "watermarked" with my site logo at the bottom right, like in the image I used in the example:
As I'm reusing the same image files as the background-image in the page headers, sometimes the whole logo or parts of it are visible in the header and I'd like to avoid this.
(if you run the snippet above, click on the "Full Page" link and resize the browser, you'll see the logo appearing/disappearing)
The logo is always the same size and the same amount of pixels away from the image's bottom...so just completely "hiding" the image's bottom 35 pixels would be enough.
So here's my question:
Is there a way to define a background-image in a way that the image's bottom 35 pixels are NEVER visible?
I.e. even if I set background-position: bottom, I'd like to see the visible part of the image start 35 pixels from the actual bottom, so my site logo is hidden.
I've seen https://stackoverflow.com/q/493296/6884, but I can't just set sizes in pixels, because my images are in many different sizes.
答案1
得分: 1
不完全一样，但你可以剪切元素底部的35像素，这个元素上附加了背景图像。您需要添加底部填充以防止任何内容被剪切，然后添加负底边距以恢复由剪切引起的白空间。
clip-path: inset(0 0 35px 0);
padding-bottom: 35px;
margin-bottom: -35px;
我认为这样可以达到所期望的效果，而不会有严重的副作用。唯一可能出现问题的情况是，如果您正在使用background-size来放大背景图像，或者使用cover或contain，因为如果是这样，水印的高度可能会超过35像素。在这种情况下，您可以考虑使用包含视口宽度单位vw的calc表达式来替代固定的35像素。
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
#d1, #d2 {
background-image: url(https://i.stack.imgur.com/hjPqu.png);
background-position: bottom left;
}
#d2 {
clip-path: inset(0 0 35px 0);
padding-bottom: 35px;
margin-bottom: -35px;
}
<!-- 语言: lang-html -->
<div id="d1">
One<br>
Two<br>
Three<br>
Four<br>
Five<br>
Six<br>
Seven<br>
</div>
<p>Content between</p>
<div id="d2">
One<br>
Two<br>
Three<br>
Four<br>
Five<br>
Six<br>
Seven<br>
</div>
<p>Content between</p>
<!-- 结束代码片段 -->
英文:
Not exactly, but you could clip off the bottom 35 pixels of the element to which the background image is attached. You’ll need to add bottom padding to prevent any content being clipped, and then a negative bottom margin to recover the white space resulting from the clip.
clip-path: inset(0 0 35px 0);
padding-bottom: 35px;
margin-bottom: -35px;
I think this would have the desired effect without any serious side-effects. The only trouble you might have is if you are using background-size to scale your background image larger, or using cover or contain, because if you are, the height of the watermark might end up being more than 35 pixels. In that case, you may be able to substitute the fixed 35 pixels with a calc expression including viewport width units vw.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#d1, #d2 {
background-image: url(https://i.stack.imgur.com/hjPqu.png);
background-position: bottom left;
}
#d2 {
clip-path: inset(0 0 35px 0);
padding-bottom: 35px;
margin-bottom: -35px;
}
<!-- language: lang-html -->
<div id="d1">
One<br>
Two<br>
Three<br>
Four<br>
Five<br>
Six<br>
Seven<br>
</div>
<p>Content between</p>
<div id="d2">
One<br>
Two<br>
Three<br>
Four<br>
Five<br>
Six<br>
Seven<br>
</div>
<p>Content between</p>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论