html - 制作文字适合剪辑路径的标题图像
问题描述
我有一个标题图像,它使用剪辑路径使其下部倾斜,如下所示:
CSS:
.angled {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}
然后我将这个类应用到任何我想要成角度的 div 上,这很有效,但是对于该类中包含文本的 div,文本不适合新形状的 div。我想要它,所以第一行 - 大标题,整齐地适合角度。
(请注意,使用 codepen,由于某种原因视频不会剪辑 - 它在本地工作正常 - 这不是问题)
这是我的代码笔
.angled {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.angled-inverted {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
@media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<header>
<div class="overlay angled"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="angled">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
</div>
</div>
</div>
</header>
<section class="angled-inverted" style="background-color: grey; padding-top: -1rem; padding-bottom: 15rem;">
<div class="container-fluid" style="padding-left: 4rem">
<div class="row">
<div class="col">
<h1 style="font-size: 45pt">Angled Video Image</h1>
<p style="font-family:evogriaregular">The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Bootstrap 4.</p>
<p>The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code> class in the CSS.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
</div>
</div>
</div>
</section>
解决方案
clip path
不支持,用于图像而不是文本,
如果您设置严格的字体大小,则它不能自行更改,
padding
不能为负,不应该使用
单位
,最后您将 css 到处传播-外部,内联互相争论多子层以上任何一种都会导致问题。pt
推荐阅读
- bootstrap-4 - bootstrap 如何知道屏幕尺寸是多少?
- kubernetes - Azure Functions 支持使用在 Kubernetes 中运行的 HTTP 触发器进行身份验证
- authentication - Okta 在登录特定操作后重新输入密码
- javascript - HTML属性值通过javascript更改后返回其初始值
- github - 如何获取 Github 提交的链接?
- python - barh matplotlib(python)中的条形高度
- python - 列表迭代值(int)与 Pandas 单元格值不匹配,但应该吗?
- python - 在随机 networkx 图中设置不同的节点颜色
- python - 动态更改任务重试次数
- windows - Windows 上的 Rshell 在通过 rsync 或 cp 将文件发送到运行 micropython 的 ESP32 时随机冻结