html - 如何在 html 中删除 skewY 之后的空白点？-6ren

html - 如何在 html 中删除 skewY 之后的空白点？

转载作者：行者123 更新时间：2023-11-27 23:23:58

我试图在 HTML 中组合两张图片，但在 CSS 中使用 skewY 后我看到了空白点。我如何制作底部图像和白点以将其组合以适合设计 View ？

下面是 HTML。我将图片 1 添加到 <div class="header__bg"> 中和图像 2 到 <section class="main_image">.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="HTMLPage2.css">
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>
        <div class="header__bg"></div>
        <h1>test</h1>
    </header>

    <section class="main_image">
    <h1>Section Content</h1>
    </section>

</body>
</html>

下面是 CSS。我正在尝试编写代码以添加 2 个图像来制作我想要的形状。我希望看到空白部分成为底部图像的一部分。

header {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.header__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("GettyImages2.jpg");
    transform: skewY(-6deg);
    transform-origin: top left;
}
section.main_image {
    background-image: url("GettyImages1.jpg");
}


h1 {
    margin: 0;
    padding: 100px 0;
    font: 44px "Arial";
    text-align: left;
    margin: 35px;
}

header h1 {
    position: relative;
    color: white;
}

我看到图像之间有白色部分，我希望白色部分成为底部图像的一部分。有什么方法可以做到这一点吗？

最佳答案

有几种方法可以获得您想要的东西。

注意:为了更好地说明，我只是使用了两个来自互联网的不同随机图像样本。

负值边距:

首先，您可以尝试 margin-top: some negative values;(在我的示例中我只使用了 -77px)并添加 z-index : 1; 到您的上图和 header h1 以确保它始终保持在下图的顶部。 (在这种方法中不需要 z-index。)

header {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.header__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://www.cranfield.ac.uk/~/media/images-for-new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx?h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681");
    background-repeat: no-repeat;
    transform: skewY(-6deg);
    transform-origin: top left;
    z-index: 1;
}
section.main_image {
    background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRmMDQzLWEwZmItNDY1Mi1iOGVlLTZiYzM2MmRhZTVhOVwvZDVqMXo0NC0wYzIxZjU0Ni0zOWViLTQ4ZjktODIzMC0wYjQ1MDBjN2I4OGYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_Xy26vERxse28DI8z2gwy-z0M9aBlGMXJSOwbi8_nM");
    background-repeat: no-repeat;
    margin-top: -77px;
}


h1 {
    margin: 0;
    padding: 100px 0;
    font: 44px "Arial";
    text-align: left;
    margin: 35px;
}

header h1 {
    position: relative;
    color: white;
    z-index: 1;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="HTMLPage2.css">
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>
        <div class="header__bg"></div>
        <h1>test</h1>
    </header>

    <section class="main_image">
    <h1>Section Content</h1>
    </section>

</body>
</html>

使用 translateY 进行转换:和上一个一样，你可以添加 transform: translateY(some negative value); 到你的低位图像将它拉起来， z-index: 1; 到你的高位图像. (z-index 是这种方法所必需的)。

header {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.header__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://www.cranfield.ac.uk/~/media/images-for-new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx?h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681");
    background-repeat: no-repeat;
    transform: skewY(-6deg);
    transform-origin: top left;
    z-index: 1;
}
section.main_image {
    background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRmMDQzLWEwZmItNDY1Mi1iOGVlLTZiYzM2MmRhZTVhOVwvZDVqMXo0NC0wYzIxZjU0Ni0zOWViLTQ4ZjktODIzMC0wYjQ1MDBjN2I4OGYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_Xy26vERxse28DI8z2gwy-z0M9aBlGMXJSOwbi8_nM");
    background-repeat: no-repeat;
    transform: translateY(-77px)
}


h1 {
    margin: 0;
    padding: 100px 0;
    font: 44px "Arial";
    text-align: left;
    margin: 35px;
}

header h1 {
    position: relative;
    color: white;
    z-index: 1;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="HTMLPage2.css">
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>
        <div class="header__bg"></div>
        <h1>test</h1>
    </header>

    <section class="main_image">
    <h1>Section Content</h1>
    </section>

</body>
</html>

对两个图像进行变换倾斜:最后两种方法有一个小缺点，即较低图像的较高维度位于较高图像的后面，以避免我们可以进入另一种方法，它不是那么干净整洁，但它会为我们完成工作。为此，我稍微修改了您的代码，您可以在下面的代码片段中看到结果:

body > div {
  height: 560px;
}

body > div,
header,
section {
  position: relative;
  overflow: hidden;
}

header,
section {
  height: 300px;
}

.header__bg,
.main_image {
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  transform: skewY(-6deg);
  transform-origin: top left;
}

.header__bg {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url("https://www.cranfield.ac.uk/~/media/images-for-new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx?h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681");
    z-index: 1;
}

section.main_image {
    background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRmMDQzLWEwZmItNDY1Mi1iOGVlLTZiYzM2MmRhZTVhOVwvZDVqMXo0NC0wYzIxZjU0Ni0zOWViLTQ4ZjktODIzMC0wYjQ1MDBjN2I4OGYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_Xy26vERxse28DI8z2gwy-z0M9aBlGMXJSOwbi8_nM");
}

h1 {
    margin: 0;
    padding: 100px 0;
    font: 44px "Arial";
    text-align: left;
    margin: 35px;
    z-index: 1;
}

header h1 {
    position: relative;
    color: white;
}

section > h1 {
  transform: skewY(6deg);
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="HTMLPage2.css">
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <div>
    <header>
        <div class="header__bg"></div>
        <h1>test</h1>
    </header>

    <section class="main_image">
      <h1>Section Content</h1>
    </section>
   </div>
</body>
</html>

关于html - 如何在 html 中删除 skewY 之后的空白点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57879481/

文章推荐： javascript - 切换 Bootstrap 4 桌面导航的滑入动画

文章推荐： c++ - 关于运算符重载的例子

文章推荐： c++ - C++ 类之间的变量超出范围

css - 顶部和底部具有不同值的 SkewY
这个问题在这里已经有了答案: CSS Transform Skew [duplicate] (8 个答案) How to transform each side of a shape separat
javascript - 在调整窗口大小时更改 skewY Angular
请不要使用 jQuery 和 SCCS(即使我在这里使用 UIkit3 进行样式设置)。导航栏有一个倾斜的背景图像，这是通过 CSS 中的线性渐变和固定高度完成的。我的方法是使用 transform:
Safari(桌面和移动)中的 CSS skewY 过渡错误
在为 skewY() 属性设置动画时，该问题很明显。看起来元素的宽度缩小了一点，不再接触到同样宽度的容器的边。使用 skewX() 设置动画时不会发生同样的情况 - 高度按预期设置动画。我只在桌面
javascript - 查找当前 SkewX、SkewY 和旋转值 - Javascript
考虑到可能存在仅使用旋转或仅使用 skewX 等的多种场景，我如何才能找到元素上当前的旋转、skewX 和 skewY 变换设置。到目前为止，我很好地返回了旋转 Angular : getAngle
html - 如何仅将 skewY() 转换应用于
元素的一侧？
这个问题在这里已经有了答案: one sided skew with css (2 个答案) 关闭 5 年前。
html - 如何在 html 中删除 skewY 之后的空白点？
我试图在 HTML 中组合两张图片，但在 CSS 中使用 skewY 后我看到了空白点。我如何制作底部图像和白点以将其组合以适合设计 View ？下面是 HTML。我将图片 1 添加到中和图像
html - CSS 3 变换 skewY 和调整大小
谁能解释一下这是怎么回事 site在调整大小时实现 skeyY 变换对象的完美缩放？我可以使用下面的代码实现静态效果，但我无法让它在调整大小时保持完美的垂直对齐。我尝试使用媒体查询，但结果 Not
html - skew() 和 skewX() 的区别 skewY()
在我的网站上为某些对象创建一些转换时，我发现了以下内容。如果一个对象被赋予转换属性 skew(20deg,45deg) 将不同于另一个具有的对象skewX(20deg) 和 skewY(45deg)
javascript - 在 SVG 上使用 skewX 和 skewY 时如何补偿平移
上下文:@AnaTudor (@daredevil) is talking about使用 skewX 或 skewY 时 SVG 的 d 移动距离，所以我想知道是否有任何方法可以按顺序计算该距离补偿

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在 html 中删除 skewY 之后的空白点？